动画

[align=left][color=purple]# Animations[/color]
[color=red]# animation[/color][color=red][font=宋体]（动画）[/font][/color]
[color=purple]Animations provide a way to change elementsproperties over time. Typical uses are making object larger or changing itsposition in a way it looks natural for the user. To make an animation you makean animation object and then run it on target. Don't forget that you have toinclude the animation using `goog.require()`, as no animations are loadedautomatically. By default all animations run for 1 second, you can change itwith `setDuration()` method.[/color]
[color=red]animation[/color][color=red][font=宋体]提供了一种随着时间改变元素属性的方法。最典型的方法例如使得对象变大或者改变它的位置，并且使用户感觉很自然。为了实现一个动画，你需要建立[/font][/color][color=red]animation[/color][color=red][font=宋体]对象，并在目标上运行它。不要忘了你需要使用[/font][/color][color=red]goog.require()[/color][color=red][font=宋体]来添加[/font][/color][color=red]animation[/color][color=red][font=宋体]的支持，[/font][/color][color=red]animation[/color][color=red][font=宋体]不会被自动加载。默认的，所有动画都只持续[/font][/color][color=red]1[/color][color=red][font=宋体]秒，你可以通过[/font][/color][color=red]setDuration[/color][color=red][font=宋体]方法来改变它。[/font][/color]
[color=#00B050]    #!JavaScript
    var fadehalf = new lime.animation.FadeTo(.5).setDuration(2);
    ball.runAction(fadehalf);
[/color]
[color=purple]Different types of animations supported:[/color]
[color=purple]-   *MoveBy* - move object by offset fromcurrent location.[/color]
[color=purple]-   *MoveTo* - move object to specificlocation.[/color]
[color=purple]-   *ScaleBy* - scale objects dimensionsby a factor. Passing 2 makes object 2 times bigger from its current size.[/color]
[color=purple]-   *ScaleTo* - scale objects dimensionsto a given factor.[/color]
[color=purple]-   *RotateBy* - rotate object by a givenangle[/color]
[color=purple]-   *RotateTo* - rotate object to aspecific angle[/color]
[color=purple]-   *ColorTo* - change objects color fromcurrent color to another.[/color]
[color=purple]-   *FadeTo* - fade elements opacity to agiven value.[/color]
[color=red]Lime[/color][color=red][font=宋体]支持不同种类的动画效果：[/font][/color][color=red]
-   *MoveBy* -[/color][color=red][font=宋体]按照一定的针对当前位置的偏移量来移动对象。[/font][/color][color=red]
-   *MoveTo* - [/color][color=red][font=宋体]把对象移动到指定位置。[/font][/color][color=red]
-   *ScaleBy* - [/color][color=red][font=宋体]根据一个因数来缩放对象。传递[/font][/color][color=red]2[/color][color=red][font=宋体]将会使得对象的大小是当前的两倍。[/font][/color][color=red]
-   *ScaleTo* - [/color][color=red][font=宋体]根据指定因数来缩放对象尺寸。[/font][/color][color=red]
-   *RotateBy* - [/color][color=red][font=宋体]根据指定角度旋转对象。[/font][/color][color=red]
-   *RotateTo* - [/color][color=red][font=宋体]旋转对象到一个指定角度。[/font][/color][color=red]
-   *ColorTo* - [/color][color=red][font=宋体]把对象的颜色从当前的变为另一种。[/font][/color][color=red]
-   *FadeTo* - [/color][color=red][font=宋体]根据指定数值改变元素的透明度。[/font][/color][/align][align=left]
[color=purple]If you wish know when an animation has ended you canlisten for its *stop* event. Event name is also defined as constant `lime.animation.Event.STOP`.[/color]
[color=red][font=宋体]如果你想知道动画什么时候结束，你可以监听它的[/font][/color][color=red]stop[/color][color=red][font=宋体]事件。事件名称由[/font][/color][color=red]lime.animation.Event.STOP[/color][color=red][font=宋体]定义。[/font][/color]
[color=#00B050]    #!Javascript
    var moveleft = new lime.animation.MoveBy(-100,0);
    ball.runAction(moveleft);
    goog.events.listen(moveleft,lime.animation.Event.STOP,function(){
        alert('Ball has finished moving');
    })[/color]

[color=purple]## Multiple targets[/color]
[color=red]## [/color][color=red][font=宋体]多目标[/font][/color]
[color=purple]There is also possibility to run a single animationon multiple targets. For that you create animation instance, then add targetsto this instance and finally call the `play()` method.[/color]
[color=red][font=宋体]可以在多个目标上执行同一种动画。你可以建立一个[/font][/color][color=red]animation[/color][color=red][font=宋体]实例，绑定到不同的对象上，然后调用[/font][/color][color=red]play[/color][color=red][font=宋体]方法。[/font][/color]
[color=#00B050]    #!JavaScript
    var doublesize = new lime.animation.ScaleBy(2);
    doublesize.addTarget(ball);
    doublesize.addTarget(square);
    doublesize.play();[/color]

[color=purple]## Sequence, Spawn and Loop[/color]
[color=red]## sequence[/color][color=red][font=宋体]（队列），[/font][/color][color=red]spawn[/color][color=red][font=宋体]（分裂）和[/font][/color][color=red]loop[/color][color=red][font=宋体]（循环）[/font][/color]
[color=purple]Sequence, Spawn and Loop are animations thatcombine other animations to make a new effect. Sequence takes in unlimitedamount of animations and runs them in a queue one after another. Spawn issimilar but all the subanimations run together in same time. Loop is [/color][color=red]used if you wish the animation to restart itself after it hasfinished.
sequence[/color][color=red][font=宋体]（队列），[/font][/color][color=red]spawn[/color][color=red][font=宋体]（分裂）和[/font][/color][color=red]loop[/color][color=red][font=宋体]（循环）是多个动画组合成新的动画的三种方式。[/font][/color][color=red]Sequence[/color][color=red][font=宋体]可以让任意多的动画按照队列依次执行。[/font][/color][color=red]Spawn[/color][color=red][font=宋体]类似于“子动画”，即多个动画效果同时进行。[/font][/color][color=red]Loop[/color][color=red][font=宋体]可以让一个动画效果在结束后重播。[/font][/color]
[color=#00B050]    #!Javascript
    var zoomout = new lime.animation.Spawn(
        new lime.animation.ScaleTo(5),
        new lime.animation.FadeTo(0)
        );
    var keepturning = new lime.animation.Loop(
        new lime.animation.RotateBy(90)
        );
[/color]
[color=purple]## Precompiled CSS3 animations[/color]
[color=red]## [/color][color=red][font=宋体]预编译的[/font][/color][color=red]CSS3[/color][color=red][font=宋体]动画[/font][/color]
[color=purple]Making animations as described earlier results inJavascript animations. This means the way the effect is created is by changingobjects properties with Javascript on timer intervals. Some modern browsersalso support different kind of effects called CSS3 transitions. These eventsmay run smoother as they are hardware accelerated in some platforms(iOS). Toenable this accelerated support in LimeJS you have to run the animations`enableOptimizations()` method. This makes the animation run smoother on iOSdevices and possibly use less CPU resources.[/color]
[color=red][font=宋体]以上所说的是[/font][/color][color=red]JS[/color][color=red][font=宋体]动画。也就是说，这种方式是通过调用[/font][/color][color=red]JS[/color][color=red][font=宋体]来改变对象属性以及使用[/font][/color][color=red]interval[/color][color=red][font=宋体]函数来控制动画的。一些先进的浏览器支持[/font][/color][color=red]CSS3[/color][color=red][font=宋体]动画效果。这样的动画效果因为平台（[/font][/color][color=red]iOS[/color][color=red][font=宋体]）的硬件加速而被支持得更平滑。为了在[/font][/color][color=red]LimeJS[/color][color=red][font=宋体]中启用这种加速支持，你需要调用[/font][/color][color=red]enableOptimizations()[/color][color=red][font=宋体]方法。它似的动画在[/font][/color][color=red]iOS[/color][color=red][font=宋体]设备中更平滑并且耗费更少的[/font][/color][color=red]CPU[/color][color=red][font=宋体]资源。[/font][/color]
[color=#00B050]    #!Javascript
    ball.runAction(newlime.animation.MoveBy(100,0).enableOptimizations());
[/color][color=purple]The downside is that `enableOptimizations()`does not always work. This is also the reason why you specifically have to sayyou wish the animation to use this feature. The CSS3 transitions API isn't soflexible that it could handle all possible scenarios.[/color]
[color=purple]Things that are not currently supported when`enableOptimizations()` is turned on:[/color]
[color=purple]- You can't combine move,scale and rotate animationsin a way that their timings overlap but aren't the same. You can still use themtogether in a Sequence and you can use them together in a Spawn if theirdurations match.[/color]
[color=purple]- You can't combine position,scale and size in a waythat one of the parameters is being changed manually while another isanimating.[/color]
[color=red][font=宋体]悲剧的是，[/font][/color][color=red]enableOptimizations()[/color][color=red][font=宋体]不会始终执行。这也就是你为什么要特别声明你希望动画使用这一特性的原因。[/font][/color][color=red]CSS3[/color][color=red][font=宋体]转换[/font][/color][color=red]API[/color][color=red][font=宋体]不是很灵活，因此不能处理所有可能的场景。[/font][/color][color=red]enableOptimizations()[/color][color=red][font=宋体]当前不支持的有：[/font][/color][color=red]
- [/color][color=red][font=宋体]你不能把[/font][/color][color=red]move[/color][color=red][font=宋体]、[/font][/color][color=red]scale[/color][color=red][font=宋体]和[/font][/color][color=red]rotate[/color][color=red][font=宋体]动画组合到一它们的时序重叠但不一致。你可以在队列[/font][/color][color=red]sequence[/color][color=red][font=宋体]中使用它们，或者在持续时间匹配的情况下运用在[/font][/color][color=red]spawn[/color][color=red][font=宋体]里。[/font][/color]
[/align][align=left]
[color=purple]## Easing[/color]
[color=red]## Easing[/color][color=red][font=宋体]（缓冲）[/font][/color]
[color=purple]Easing defines the characteristics how the time ischanging when the animation is running. It provides more natural motion as itdoesn't change the properties in fixed intervals. This makes an object slowdown and speed up. All Lime animations have easing ease-in-out by default. Thismeans that object will first speed up and then slow down when it reaches itsdestination. You define the easing function with `setEasing()` method. Built invalues thath you can use include:[/color]
[color=purple]-   lime.animation.Easing.EASE[/color]
[color=purple]-   lime.animation.Easing.LINEAR[/color]
[color=purple]-   lime.animation.Easing.EASEIN[/color]
[color=purple]-   lime.animation.Easing.EASEOUT[/color]
[color=purple]-   lime.animation.Easing.EASEINOUT
[/color][color=red]easing[/color][color=red][font=宋体]定义了动画进行时时间如何改变。它提供了更自然的变换——而不是在指定时间周期里硬性地改变属性。它会使得对象的改变变慢或者加速。所有[/font][/color][color=red]Lime[/color][color=red][font=宋体]动画都有默认的[/font][/color][color=red]ease in/out[/color][color=red][font=宋体]缓冲，也就是说开始会加速，在到达终点时会减速。通过[/font][/color][color=red]setEasing()[/color][color=red][font=宋体]方法来定义缓冲功能。以下的内置值可供使用：[/font][/color][color=red]
-   lime.animation.Easing.EASE
-   lime.animation.Easing.LINEAR
-   lime.animation.Easing.EASEIN
-   lime.animation.Easing.EASEOUT
-   lime.animation.Easing.EASEINOUT[/color][color=purple]
You can also provide custom function made of points of cubic bezier curve.
[/color][color=red][font=宋体]你还可以提供由三次贝塞尔曲线制成的自定义函数。[/font][/color]

[color=purple]*Lime animations do not use or rely on goog.fx.\*libraries. These are common functions for making animations in Closure Librarybut don't quite fit in with LimeJS logic. This may change in the future but notvery likely.*[/color][/align][align=left][color=red]Lime[/color][color=red][font=宋体]动画并不使用或者依靠[/font][/color][color=red]goog.fx[/color][color=red][font=宋体]库。[/font][/color][color=red]Closure[/color][color=red][font=宋体]库里有很多方法来制作动画，但不十分适合[/font][/color][color=red]LimeJS[/color][color=red][font=宋体]的逻辑。这种状况也许会在未来得到改观，但是好像不太可能。[/font][/color][/align][align=left][color=red][font=微软雅黑][b][注意：翻译部分为17html5.com版权所有，任何转载必须注明文章出处和链接地址以及作者，否则视为侵权，将追究法律责任！][/b][/font][/color]


[/align]