TimelineMax: 理解Mechanics

特别声明:开通VIP通道,年费价格为 ¥199.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

TimelineMax

先来看一下一些名词定义?Mechanics的定义是:关注对象受力或位移的行为的区域,以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法,有时候也被描述为a project artefact。我们结合这两块内容,学习如何控制和配置我们的动画,这样才知道我们要做什么。

语法

更多的定义来了:语法一词是指直接管理结构的规则和原则。正如我们的前面的教程讨论的,设置TimelineMax动画的JavaScript语法如下:

var config = {};
var tmax_tl = new TimelineMax(config);

在这里我使用TimelineMax()构造器定义了一条新的时间轴,并把config对象作为一个参数传递给它。这个参数,如果你还记得,是被称为包含配置设置的key:value键值对的“对象字面量”。TimelineMax()构造器用来实例化一个新的TimelineMax实例。

当你熟悉了语法之后,下面的这行也是一样的;也就意味着这两句也是一样的(最后一行是为了方便)。

tmax_tl.add(TweenLite.to(element, 1, { left: 100, opacity: 0.5 }));
tmax_tl.to(element, 1, { left: 100, opacity: 0.5 });

配置和属性

如果你和我一样,你可能不会去记住所有TimelineMax配置选项的参数。幸好,配置选项和属性的完整列表可以在这里找到,直接参考使用即可。

除了实际的配置,我们的时间轴也有可用的属性。例如,如果我这样写:

var config = { repeat: -1, delay: 1, repeatDelay: 0 };
var tmax_tl = new TimelineMax(config);
console.log(tmax_tl.vars);

控制台就会将整个config变量(通过tmax_tl.vars显示)作为一个对象打印出来,并允许检查每个已经设置的键/值。针对时间轴还有一个可用的属性列表,你可以点击这里进行进一步探索。

为了增加趣味,我们尝试一下,然后在你的Devtools控制台查看输出:

console.log(tmax_tl.timeline);

你看到的应该和是下面的截图类似的输出:

TimelineMax

尝试在控制台中输出以下这个属性,然后查看(控制台应该会输出一个数值):

console.log(tl.timeline._timeScale);

位置参数

创建令人惊叹的的动画序列、以及具有精确的时间控制的关键在于理解位置参数。这个参数非常灵活,可以控制补间、标签、回调、暂停甚至嵌套时间轴的位置,也就是说你可以控制所有东西,在任何地方,以任何的序列!

例如,如果我们看看下面的代码,你会看到位置参数是to()方法的最后一个参数。

tmax_tl.to( target, duration, vars, position )

这有一个完整的代码示例。密切注意注释部分,解释了位置参数如何将序列排好。我们还把方法一个接一个放置:也就是所说的链式。

tmax_tl.to(element, 1, { x:200 })
   .to(element, 1, { y:200 }, '+=1') // 在前一个to()补间结束之后1s
   .to(element, 1, { rotation:360 }, '-=0.5') // 前一个to()补间结束之前0.5s
   .to(element, 1, { scale:4 }, 6); // 从时间轴的第6s开始

你可以把位置参数当成控制时间轴上补间位置的一个方法(默认情况下,把它放置在时间轴的末端,表示为'+=0')。使用数字来表示绝对时间,以秒为单位。'+=''-='这些前缀表示相对于时间轴末端的插入点。例如,'+=2'表示把补间放到时间轴末端的两秒之后的位置,中间有一个两秒的空隙。

实践挑战及说明,帮助你从GreenSock起步

  • 访问CodePen上动画入门文件的可编辑版本。
  • 点击fork按钮,获取副本。
  • 根据代码中标注的说明。
  • 完成之后,把CodePen链接到@GreenSock

标签

你可以把标签当做给动画插入标记的方法,这样你可以在后面的序列中引用精确的点。这个点可能是#objectX从顶部向下移动100px到达的点,然后#objectY#objectX序列有一个0.5秒的重叠交互。

当使用标签的时候,记得一定要使用字符串来指定补间动画放置的位置,引入位置时间参数以控制补间的执行点。

//补间动画相对于标签的位置插入
var tmax_tl = new TimelineMax();

tmax_tl.to('#green', 1, { x: 750 }) // 在green序列结束后1s的位置插入blueGreenSpin标签
    .add('blueGreenSpin', '+=1')
       .to('#blue', 2, { x: 750, rotation: 360 }, 'blueGreenSpin') // 在blueGreenSpin插入标签
       .to('#orange', 2, { x: 750, rotation: 360 }, 'blueGreenSpin+=0.5'); // 在blueGreenSpin标签之后0.5s的位置插入补间

注意:大多数方法使用0作为位置参数的默认值(表示为'+=0')。

如果你定义了一个不存在的标签,在插入补间之前会自动把标签添加到时间轴的末尾,非常方便。

方法

方法可以帮忙完成我们希望的一些操作,换句话说,就是那些我们希望在时间轴上的每个序列发生的动作。

为了科学起见,我们写一个带有id为#objectA的对象的方法,然后把它移动到屏幕的右侧。这是使用to()方法写出的代码:

/*
.to(target:[Object||Array], duration:Number, vars:Object, position:* )
*/
tmax_tl.to($('#objectA'), 1, { left: '100px' });

上面的代码有个重点是,我们需要CSS的帮忙(position:absolute),为了实现我们的需求(移动对象)。Web上的元素有静态定位,也就是说如果你要使用上述方法移动一个对象,你需要确保相应的CSS属性已经到位,否则不会有相应的效果的。

还有?

学习到这里,跃跃欲试了吗?如果有什么东西可以剖析一下就好了,对吧?

下面的Demo使用了to()方法来控制loader的每个圆(你可以使用更简单的方法,但有一个点会比较癫狂)。尝试使用位置时间参数,让外部圆和中间圆的运动错开。这个练习的要点在于如何设置位置参数,让序列间的补间交叠。如下面的.gif所示,每个圆的动画补间都是同时的。尝试给这个动画一些添加一些内容,通过让序列交叠,如本文开头的动图gif那样。好运~

// 最后一个参数是位置时间参数Position Timing.
// 使用这些参数来是外部圆和中间圆的运动错开
tmax_tl.to($('svg > circle:nth-of-type(1)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(2)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(3)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(4)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(5)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(6)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(7)'), 1, tween_options_to, 0)

接下来

和之前一样,如果你想要跳着阅读的话,可以查看GreenSock文档——特别注意TweenLiteTweenMax两部分。请继续关注本系列教程,下次见!

本文根据@Dennis Gaebel的《TimelineMax: Understanding the Mechanics》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/articles/timelinemax-understanding-the-mechanics--cms-23296

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/timelinemax-understanding-the-mechanics.htmlNike Sb Blazer Zoom Mid Xt Orange White Circuit 876872-819

如需转载,烦请注明出处:https://www.w3cplus.com/css3/timelinemax-understanding-the-mechanics.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部