TweenMax中文初级教程四

2020-04-17 11:29:23

ScrollToPlugin (不包含于TweenMax.js)

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

//窗口滚动到400pxTweenLite.to(window, 2, {scrollTo:400});//窗口滚动到锚点TweenLite.to(window, 2, {scrollTo:"#someID"});//div滚动到250pxTweenLite.to(myDiv, 2, {scrollTo:250});//同时滚动X和Y方向TweenLite.to(myDiv, 2, {scrollTo:{y:400, x:200}, ease:Power2.easeOut});//滚动到锚点#someID上方50pxTweenMax.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});



  • 2020-11-22 23:27:28

    dagger学习教程

    dagger android 学习(一):dagger基础使用 dagger android 学习(二):AndroidInjector的使用 dagger android 学习(三):ContributesAndroidInjector的进一步优化 dagger android 学习(四):基于dagger2的mvp架构

  • 2020-11-22 23:31:22

    Dagger2与AndroidInjector详解

    相信使用过Dagger开发Android应用的小伙伴会知道(如果你还不是很了解Daager,可以先看我之前的一篇基本介绍:Dagger2使用攻略),我们会在Activity或Fragment的生命周期方法中执行成员注入。比如这样:

  • 2020-11-23 08:52:59

    asm.js 和 Emscripten 入门教程

    asm.js 就是为了解决这两个问题而设计的:它的变量一律都是静态类型,并且取消垃圾回收机制。除了这两点,它与 JavaScript 并无差异,也就是说,asm.js 是 JavaScript 的一个严格的子集,只能使用后者的一部分语法。

  • 2020-11-23 09:11:07

    爬虫——记一次破解前端加密详细过程

    从最初使用webdriver+selenium爬虫到现在利用http请求解析html,经历过各种各样的问题,webdriver+selenium这种办法虽然万能,而且可以用JS写解析脚本方便调试,

  • 2020-11-24 19:18:43

    nuxtjs打成用于webview的相对路径

    路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了。 nuxt不同于vue项目,思索了许久,终于找到了配置的地方

  • 2020-11-24 23:22:59

    eruda,移动端网页调试神器

    webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面,想要查看手机浏览器信息是非常困难的事,当出现问题的时候,你又不能查看日志,一般会连接本地测试环境,然后在alert来打印日志