zoukankan      html  css  js  c++  java
  • greensock之缓动效果ease

    https://www.iteye.com/blog/as3-892368

    ‍1,Linear线性变化
    字面意思就很好理解,线性变化,就是匀速。


    2,Back变化。
    不知道怎么解释好,Back有回来的意思,在缓动前,会先往回运动一段距离。


    3,Bounce弹跳变化。
    顾名思义,在变化前会几次回归原点,好像在弹一样。


    4,Circ圆形变化。
    这个翻译···自己先汗一下自己,运动的曲线是一个圆形的弧度。


    5,Cubic立方体变化。
    这个更晕,跟圆形变化差不多,不过更平滑些。

    6,Elastic橡皮圈变化
    这个···翻译,我麻木了···跟Back变化有点像,但是会有一个很强的波动。在EaseIn和EaseOut时尤为明显。


    7,Expo爆炸变化
    一直很平缓,在最后一点完成所有变化。


    8,Quad变化
    不知道Quad代表什么意思,不过是比较普通的缓动。Quadratic平方缓动??。


    9,Quart四分之一变化。
    我才Quart是Quarter的意思,有1/4的时间是没有缓动。


    10,Quint变化
    百度一下是什么五胞胎之一?晕了,是1/5时间没有缓动吗?


    11,Sine正弦变化
    像正弦一样的变化~?猜得····


    12,Strong变化。
    这个没有图···因为他没有图···汗···字面意思理解就是很强的变化。
    以上是12种内置的变化,所以准确来说是有36种的,那剩下的4个类是做什么的呢。

    13,EaseLookup
    包含一个静态方法fine(),可以通过字符串String直接取得ease的实例。方便一些反射操作的需要。例:
    TweenMax.to(ball, 1, { x:200,ease:EaseLookup.find("backEaseInOut") } );


    14,FastEase
    AS3的TweenMax版本有内置的算法可以加速缓动效果。需要用这个类的静态方法activate()手动打开。可以提高35%~80%的缓动计算,提高2%~15%的整个缓动效率。
    可以被加速的缓动变化包括:Linear Quad Cubic Quart Quint Strong这六种而已。打开方法,例:
    FastEase.activate([Strong, Linear, Quad]);
    还有另外一个静态方法activateEase(ease:Function, type:int, power:uint):void,是用来把这种优化方法用在非com.greensock的缓动上的,例如用在AS3自带的缓动类。
    15,RoughEase
    RoughEase(strength:Number = 1, points:uint = 20, restrictMaxAndMin:Boolean = false, templateEase:Function = null, taper:String = "none", randomize:Boolean = true, name:String = "")
    通常的缓动变化都是很平滑的,如果想要一个不平滑的效果,就可以使用RoughEase
    这里列出的是他的构造方法,其中:
    strength:Number:随机点的幅度。
    points:uint:随机点的数量。
    restrictMaxAndMin:Boolean:当设为true时,随机数的变化会在初始值和终点值之间波动。当为false时,随机数的变化可能会超过这个区间。
    templateEase:Function:随机点作用的缓动模板。默认是Linear.easeNone。
    taper:String:随机变化趋向那一端,"in”的话趋向于起点,"out"的话趋向于终点。默认是"none"。
    randomize:Boolean:设为true时,缓动位置将会随机变化。如果为false时,缓动位置将会锯齿型变化。
    name:String :为roughEase实例命名,这样以后可以使用静态方法byName()获取引用。
    用法:
    例1,直接使用:
    TweenLite.to(ball, 2, {y:0, ease:RoughEase.create(1, 20, true, Bounce.easeInOut)});
    例2,生成实例调用:
    var _roughEase:RoughEase = new RoughEase(1,20,true, Strong.easeOut, "none", true, "superRoughEase");
    然后直接调用:
    TweenLite.to(mc, 3, {y:300, ease:rough.ease});
    或者:
    TweenLite.to(mc, 3, {y:300, ease:RoughEase.byName("superRoughEase")});
    16,CustumEase
    自建缓动效果。基本不能直接编写。需要登录这个网址http://blog.greensock.com/customease/使用图形界面工具生成代码。然后COPY代码到你的项目中应用。例:
    创建:
    CustomEase.create("myCustomEase", [{s:0,cp:0.814,e:0.908},{s:0.908,cp:1.002,e:0.376},{s:0.376,cp:-0.25,e:1}]);
    使用:
    TweenMax.to(mc, 2, {x:"250", ease:CustomEase.byName("myCustomEase")});

  • 相关阅读:
    重学《C#高级编程》(序)
    分布式锁-基于redis的分布式锁实现
    CentOS 7.9 安装docker
    JAVA使用UDP收发文件
    MYSQL 查询指定范围内的经纬度
    tomcat 8.x 配置 HTTPS 协议
    JDBC 连接 Oracle 11g 集群
    [centos7] svn
    单例模式
    Extjs 中 Treepanel 实现级联选中效果
  • 原文地址:https://www.cnblogs.com/dt1991/p/15080291.html
Copyright © 2011-2022 走看看