mootools

I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called .  The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack animation.  The MooTools method took a bit of Fx exploration since MooTools doesn't animate CSS transform out of the box, and this exploration reminded me of just how amazing MooTools' Fx classes are.  We all know MooTools features the smoothest effects of any JavaScript toolkit, and now I'm confident in saying the Fx class is as flexible or more flexible than any toolkit available.  Let me show you how simple it is to override a Fx instance's set method  to animate any CSS property you'd like!

我最近发布了一个很棒CSS3 / MooTools教程(如果我自己这么说的话)，名为“ 。 帖子介绍了两种方法，一种是纯CSS方法，另一种是MooTools支持的类，用于复制Google+精美的照片堆栈动画。 由于MooTools并未对CSS transform进行动画处理，因此MooTools方法进行了一些Fx探索，而这种探索使我想起了MooTools的Fx类多么惊人。 我们都知道MooTools具有JavaScript工具箱中最流畅的效果，现在我有信心说Fx类比任何可用的工具箱都灵活或更灵活。 让我向您展示覆盖Fx实例的set方法以动画化您想要的任何CSS属性有多么简单！

快速Fx入门 (Quick Fx Primer)

JavaScript animations work by animating an element's style properties over a defined duration.  Throughout that duration, however, the styles are updated at varying time increments (not as simples as division of style points over duration) based on the transition () used.

JavaScript动画通过在定义的持续时间内对元素的样式属性进行动画处理来工作。 但是，在整个持续时间内，样式会根据使用的过渡( )以变化的时间增量(不像在持续时间内划分样式点那样简单)进行更新。

Fx开箱即用 (Fx Out of the Box)

MooTools' Fx class is the base for many classes in MooTools, including Fx.Tween and Fx.Morph.  Fx's role is to provide a solid base for all types of animations, as well as managing style values over time.  Fx defines several base methods for animating as well, including start, cancel, set, pause, and resume methods.  The Element.Styles and Element.ShortStyles objects aid in parsing styles.  These objects look like:

MooTools的Fx类是MooTools中许多类的基础，包括Fx.Tween和Fx.Morph 。 Fx's作用是为所有类型的动画提供坚实的基础，并随着时间的推移管理样式值。 Fx定义了几种用于动画制作的基本方法，包括start ， cancel ， set ， pause和resume方法。 Element.Styles和Element.ShortStyles对象有助于解析样式。 这些对象看起来像：

Element.Styles = {	left: '@px', top: '@px', bottom: '@px', right: '@px',	width: '@px', height: '@px', maxWidth: '@px', maxHeight: '@px', minWidth: '@px', minHeight: '@px',	backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px', color: 'rgb(@, @, @)',	fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', clip: 'rect(@px @px @px @px)',	margin: '@px @px @px @px', padding: '@px @px @px @px', border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',	borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @', borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',	zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@'};Element.ShortStyles = {margin: {}, padding: {}, border: {}, borderWidth: {}, borderStyle: {}, borderColor: {}};['Top', 'Right', 'Bottom', 'Left'].each(function(direction){	var Short = Element.ShortStyles;	var All = Element.Styles;	['margin', 'padding'].each(function(style){		var sd = style + direction;		Short[style][sd] = All[sd] = '@px';	});	var bd = 'border' + direction;	Short.border[bd] = All[bd] = '@px @ rgb(@, @, @)';	var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';	Short[bd] = {};	Short.borderWidth[bdw] = Short[bd][bdw] = All[bdw] = '@px';	Short.borderStyle[bds] = Short[bd][bds] = All[bds] = '@';	Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';});

With this format, static styles can be processed and translated from one value to another regardless of whether shorthand or longhand syntax is used. Note that these styles all have strictly defined value formats.

使用这种格式，可以处理静态样式并将其从一个值转换为另一个值，而不管使用的是速记语法还是速记语法。 请注意，这些样式均具有严格定义的值格式。

一个问题 (A Problem)

One problem with the format provided in Element.Styles (and the problem isn't MooTools-specific) is that the transform property has no standard value signature.  You can incorporate translate, rotate, scale, and so on, thus no set format can be reliably nailed down, much less parsed efficiently.  So how can we utilize MooTools to to animate transforms and other properties which have no absolute value format?  Damn easily.

Element.Styles提供的格式存在的一个问题(该问题不是特定于MooTools的)是transform属性没有标准值签名。 您可以合并translate ， rotate ， scale等，因此无法可靠地确定设置的格式，而不能有效地进行解析。 那么，我们如何利用MooTools对没有绝对值格式的变换和其他属性进行动画处理？ 真该死。

一个办法 (A Solution)

The key to managing transition value settings is customizing your Fx instance's set method.  The set method is called several times over the course of an Fx animation to update the style to the proper value at that point in the animation. The set method with signature is:

管理过渡值设置的关键是自定义Fx实例的set方法。 在Fx动画过程中多次调用set方法，以将样式更新为动画中该点的适当值。 带有签名的set方法是：

set: function(value) {	// MooTools works with that value here}

The focal point of what I've illustrated is the value argument which is provided by the Fx instance.  The value argument represents the state within the animation, between 0 and 1, that the style should be set to.  Zero represents the animation lower value, the one value represents the larger value possibility of the animation.  So what value does value have?  Loads.  As long as you know the origin and destination value for the current animation, you can multiply the value by the destination state and get the desired result.   Take the Fx piece of my PhotoStack class for example:

我所说明的焦点是Fx实例提供的value参数。 value参数表示动画中应设置样式的状态，介于0和1之间。 零表示动画的较低值，一个值表示动画的较大值可能性。 那么value具有什么价值呢？ 负载。 只要知道当前动画的原点和目标值，就可以将该value乘以目标状态并获得所需的结果。 以我的PhotoStack类的Fx为例：

myFx.set = function(value) {	// Calculate image settings specific to this instance	var index = image.retrieve("photostack-index"),	targetRotation = (this.rotationStart + (index * this.rotationIncrement)), // deg	targetTranslation = (this.translationStart + (index * this.translationIncrement)), // px	targetTranslationPx = this.translationPx; //px	// Create the style string for this spot in the animation	var style = "rotate(" + (targetRotation * value) + "deg) translate(" + (targetTranslation * value) + "px, " + (targetTranslationPx * value) + "px) scale(" + (1 + (value * (this.options.scaleMax - 1))) + ")";	// Update those styles accordingly	image.setStyles({		"-webkit-transform": style,		"-moz-transform": style,		"-o-transform": style,		"-ms-transform": style,		transform: style	});}.bind(this);

The style variable animates the transform of rotate, translate, and scale.  Note that the state of each translation property is calculated by multiplying the destination value by the value provided to the set function, and thus the style is changed to its appropriate fractional value!  If we were to log the value and resulting style calculation to the console, it would look like:

style变量可动画化rotate ， translate和scale的transform 。 请注意，每个翻译属性的状态都是通过将目标值乘以提供给set函数的value来计算的，因此，样式将更改为其适当的小数！ 如果我们将value和结果样式计算记录到控制台，则它看起来像：

// Subsequent text is from: console.warn(value," / ", style);// Remember that the style values are (value * destinationValue), calculating the fractional value or state of animation0 / rotate(0deg) translate(0px, 0px) scale(1)0.003942649342761062 / rotate(0.023655896056566372deg) translate(0px, -0.011827948028283186px) scale(1.000394264934276)0.06490812266523716 / rotate(0.38944873599142293deg) translate(0px, -0.19472436799571147px) scale(1.0064908122665237)0.16465721173163989 / rotate(0.9879432703898393deg) translate(0px, -0.49397163519491966px) scale(1.016465721173164)0.35448191658586403 / rotate(2.1268914995151844deg) translate(0px, -1.0634457497575922px) scale(1.0354481916585865)0.3726146371583089 / rotate(2.2356878229498536deg) translate(0px, -1.1178439114749268px) scale(1.0372614637158308)0.39399644503897263 / rotate(2.363978670233836deg) translate(0px, -1.181989335116918px) scale(1.0393996445038973)0.6364759677586626 / rotate(3.8188558065519755deg) translate(0px, -1.9094279032759878px) scale(1.0636475967758663)0.6545084971874737 / rotate(3.9270509831248424deg) translate(0px, -1.9635254915624212px) scale(1.0654508497187474)0.8235279807847222 / rotate(4.941167884708333deg) translate(0px, -2.4705839423541667px) scale(1.0823527980784724)0.9238389680425416 / rotate(5.54303380825525deg) translate(0px, -2.771516904127625px) scale(1.0923838968042543)0.9858158664573369 / rotate(5.914895198744022deg) translate(0px, -2.957447599372011px) scale(1.0985815866457338)0.990545258721667 / rotate(5.9432715523300015deg) translate(0px, -2.9716357761650007px) scale(1.099054525872167)1 / rotate(6deg) translate(0px, -3px) scale(1.1)

Tip: the longer the duration, the more the set method will be called.

提示：持续时间越长，将调用set方法的次数越多。

The frequent set calls over the course of the animation create the animation.  In our example, we've updated the transform style; of course, you could animate any style within your custom set function.  What if you want to animate multiple CSS properties with an animation, including both properties supported  and not supported by MooTools?  Simple:

动画过程中的频繁设置调用将创建动画。 在我们的示例中，我们更新了transform样式； 当然，您可以在自定义set函数中为任何样式设置动画。 如果要使用动画为多个CSS属性设置动画，包括MooTools支持和不支持的两个属性，该怎么办？ 简单：

// Assuming myFx is an instance of Fx.Morph or Fx.Tween....var oldSet = myFx.set;myFx.set = function(value) {	// Run the "old"	oldSet.apply(this, arguments);		// Do your custom animation stuff here};

You "save" the instance's  initial set method and call it within your custom set method.

您可以“保存”实例的初始set方法，并在自定义set方法中调用它。

Hopefully the examples and explanation about MooTools' Fx presented above help you to understand some of the underlying code that allows you to animate element styles with MooTools.  The amount of customization to animations you can create by customizing the set method is unreal.  Happy animating!

希望上面提供的有关MooTools Fx的示例和解释可以帮助您理解一些基础代码，这些代码使您可以使用MooTools设置元素样式的动画。 通过自定义set方法可以为动画创建的自定义量是不真实的。 动画愉快！

翻译自:

mootools