Question

我试图理解为什么/如何使用SVG.js动画缓动类型“=”（外部控制）。什么时候需要？它是如何应用的？

下面是一个示例，显示SVG.js中所有类型的缓动的性能，不包括外部类型。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>SVG.js Animate Easing: "=" external ?? </h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
SVG.js includes the following animation easing types: "&lt;>" (ease in and out, default), ">" (ease out), "&lt;" (ease in), "-" (linear), "=" (external control), or a function.
The difference in performance of each is shown.
</div>
<table><tr>
<td style=width:400px;>
 The width/height of five(5) rectangles are animated, with a 5 second duration.<br><br>
<table>
<tr><td><div style='width:30px;height:30px;background:blue;border:1px solid black'></div></td><td>"&lt;>" (ease in and out, default)</td></tr>
<tr><td><div style='width:30px;height:30px;background:red;border:1px solid black'></div></td><td>">" (ease out)</td></tr>
<tr><td><div style='width:30px;height:30px;background:lime;border:1px solid black'></div></td><td>"&lt;" (ease in)</td></tr>
<tr><td><div style='width:30px;height:30px;background:orange;border:1px solid black'></div></td><td>"-" (linear)</td></tr>
<tr><td><div style='width:30px;height:30px;background:aqua;border:1px solid black'></div></td><td>"=" (external control) ?????</td></tr>
<tr><td><div style='width:30px;height:30px;background:violet;border:1px solid black'></div></td><td>function</td></tr>
<tr><td colspan=2 align=center><button id=goButton onClick=animateGo()>go</button> <button disabled id=resetButton onClick=animateReset()>reset</button></td></tr>
</table>
</td>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr>
</table>

<script id=myScript>
var mySVG = SVG("svgDiv");
var rectInout = mySVG.rect(30,30).center(60,60).attr({id:'rectInout',fill: 'blue','stroke-width':1,stroke:'black'});
var rectOut = mySVG.rect(30,30).center(120,120).attr({id:'rectOut',fill: 'red','stroke-width':1,stroke:'black'});
var rectIn = mySVG.rect(30,30).center(180,180).attr({id:'rectIn',fill: 'lime','stroke-width':1,stroke:'black'});
var rectLinear = mySVG.rect(30,30).center(240,240).attr({id:'rectLinear',fill: 'orange','stroke-width':1,stroke:'black'});
var rectExternal = mySVG.rect(30,30).center(60,260).attr({id:'rectExternal',fill: 'aqua','stroke-width':1,stroke:'black'});
var rectFunction = mySVG.rect(30,30).center(120,330).attr({id:'rectFunction',fill: 'violet','stroke-width':1,stroke:'black'});

//---button---
function animateGo()
{
   rectInout.animate(5000,"<>").attr({width:80,height:80})   //---inOut default---
   rectIn.animate(5000,">").attr({width:80,height:80})     //---in---
   rectOut.animate(5000,"<").attr({width:80,height:80})    //---out---
   rectLinear.animate(5000,"-").attr({width:80,height:80})    //---linear---
  // rectExternal.animate(5000,"=").attr({width:80,height:80})    //---external---

  var myFunction=function(pos){return Math.sin(pos*Math.PI)} //---returns to initial value--
  rectFunction.animate(5000,myFunction).attr({width:80,height:80})

  goButton.disabled=true
  resetButton.disabled=false
}

//---button---
function animateReset()
{
    rectInout.attr({width:30,height:30})   //---inOut default---
    rectIn.attr({width:30,height:30})     //---in---
    rectOut.attr({width:30,height:30})    //---out---
    rectLinear.attr({width:30,height:30})    //---linear---
    rectExternal.attr({width:30,height:30})    //---external---
    rectFunction.attr({width:30,height:30})    //---function---
    goButton.disabled=false
    resetButton.disabled=true
}
</script>
</body>
</html>

SVG.js：需要动画缓动“=”（外部控制）的例子

0 个答案: