TweenMax.js (四) 滚动,颜色渐变,拦截器

ScrollToPlugin (不包含于TweenMax.js)

用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

//窗口滚动到400px
TweenLite.to(window, 2, {scrollTo:400});

//窗口滚动到锚点
TweenLite.to(window, 2, {scrollTo:"#someID"});

//div滚动到250px
TweenLite.to(myDiv, 2, {scrollTo:250});

//同时滚动X和Y方向
TweenLite.to(myDiv, 2, {scrollTo:{y:400, x:200}, ease:Power2.easeOut});

//滚动到锚点#someID上方50px
TweenMax.to(window, 2, {scrollTo:{y:"#someID", offsetY:50}});

//滚动到最下方
TweenLite.to(myDiv, 2, {scrollTo:{y:"max"}});
TweenLite.to(myDiv, 2, {scrollTo:"max"});
ScrollToPlugin自动终止 (autoKill默认为true)

用户主动控制滚动时(例如拖动滚动条)插件默认会自动终止滚动。自动终止时会触发onAutoKill事件

TweenLite.to(window, 2, {scrollTo:{y:300,autoKill:true,onAutoKill:myAutoKillFunction}});

function myAutoKillFunction() {
 alert("autoKill");
}

ColorPropsPlugin (不包含于TweenMax.js)

ColorPropsPlugin主要用于直接在JavaScript对象上补间其他与颜色相关的属性,而不是补间元素的CSS颜色属性,因为CSSPlugin已经处理了这些。如rgba(255,0,51,0.5),#f0c,0xFF00CC,res,hsl(105,50%,80%)等。

//动画自定义函数setColor的颜色值
TweenLite.to(myObject, 1, {colorProps:{setColor:"rgb(102,255,51)"}, ease:Linear.easeNone});

//自定义函数获取颜色
var color = myObject.lineColor(); 
 
//自定义函数设置颜色
myObject.lineColor("rgb(255,0,51)"); 
 
//对颜色进行补间动画
TweenLite.to(myObject, 1, {colorProps:{lineColor:"rgb(102,255,51)"}, ease:Linear.easeNone});

ModifiersPlugin (不包含于TweenMax.js)

ModifiersPlugin 可以为几乎任何属性定义“修饰符(Modifiers)”函数作为 拦截器 。此修饰符拦截动画通常在每次更新(“tick”)时应用的值,将其作为第一个参数提供给你的函数,并允许你运行自定义逻辑,返回动画应用的新值。

  • value number | string 常规补间动画中即将应用的值。
  • target object 目标本身。

例:将旋转修改为每45度角跳动一次,类似于RoundPropsPlugin

var degrees = 45;
var tween = TweenMax.to(".arrow", 4, {rotation:360,
  modifiers: {
      rotation: function(rotation) {
        return Math.round(rotation / degrees) * degrees;   
      }
    },
 ease:Linear.easeNone,
 repeat:6,
})

例:走马灯(轮播)特效 每个框在超过500时重置为x:0

TweenMax.to(".box", 5, {
  ease: Linear.easeNone,
  x: "+=500", //将每个块向右移动500px
  modifiers: {
    x: function(x) {
      return x % 500; //强制x值在0和500之间
    }
  },
  repeat: -1
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 768评论 0 9
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,175评论 1 32
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,198评论 0 0
  • TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。官网地址CDN Twe...
    李霖弢阅读 15,045评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,441评论 0 3