玻璃破碎效果-轮播图及TweenLite基础

需要资源

计算Delaunay三角剖分简单理解为划分成三角形
TweenMax动画库

实现效果

扩展

GSPA GreenSock Animation PlatForm 官网文档
1. TweenLite 是GreenSock动画平台（GSAP）的基础 快速，轻量且灵活的动画工具
2. TweenMax 扩展TweenLite
3. TimelineLite 是一个轻量级，直观的时间线类，用于构建和管理TweenLite，TweenMax，TimelineLite和TimelineMax实例的序列
4. TimelineMax 扩展了TimelineLite，提供完全相同的功能以及有用的（但非必要的）功能
5. Draggable提供了通过使用鼠标或触摸事件，使任何DOM元素都可拖动，可旋转，可折叠，甚至可以滑动滚动

TweenLite

构造函数TweenLite( target:Object, duration:Number, vars:Object )

target: 当为DOM元素设置动画时，目标可以是：单个元素，元素数组，jQuery对象（或类似元素）或CSS选择器字符串 
duration: 单位秒 如果在vars参数中设置了useFrames：true，则设置frame
vars:  可选参数
        delay: Number 动画开始之前的延时 单位秒
        easy: 缓动函数，具体可以去参考
        paused: Boolean true时创建完动画立即暂停
        immediateRender: Boolean 一般在创建动画时下一帧就开始渲染了，除非设置delay。动画创建完成后渲染可设置为true。默认form()中设置为true
        overwrite: String/integer 控制其他的动画在相同的目标上覆盖
            参数： "none"/0/false 不被重写 
                  "all"/1 立即重写目标是存在的动画 
                  "auto"/2 动画在渲染时和已经运行的动画的某个特性重叠或冲突时重写自身冲突的特性
                  "current"/3 仅仅重写激活的动画，不管是否有属性冲突
                  "allOnStart/4"  和`all`相似，只不过要等到重写逻辑完成
                  "preexisting"/5  第一次渲染动画杀死已经存在的动画相同的目标。例如，创建了三个动画分别延时10，1，2，那么第三个动画会重写第二个动画
        onComplete: Function 动画完成后调用
        onCompleteParams: Array 给onComplete函数传递参数
        onCompleteScope: Object  `this`的指向
        onReverseComplete: 动画倒放到开头时条用
        onReverseCompleteParams:
        onStart: 动画开始时调用，也就是`time`从0改变之时
        onStartParams: 
        onStartScope:
        onUpdate: 动画处于活动状态的每帧调用
        onUpdateParams:
        onUpdateScope:
        useFrames: Boolean true时根据帧而不是`duration`和`delay`
        lazy: Boolean 避免读写性能问题
        onOverwrite: Function 动画被重写时调用
        autoCSS: Boolean  vars中用css时自动分析属性的优化
        callbackScope: Object 回调的范围

Properties属性

.data:
TweenLite.defaultEase: 默认`Power1.easeOut`
TweenLite.defaultOverwrite: 默认`auto`
TweenLite.onOverwrite: 函数参数 overwrittenTween overwritingTween target overwrittenProperties
TweenLite.selector: 类似document.getElementById()
.target: 只读
TweenLite.ticker: 引擎更新时调度ticker事件
.timeline: 只读 
.vars: 只读

Method 方法

.delay(value:Number): 获取或设置delay
TweenLite.delayedCall(delay:Number,callback:Function,params:Array,scpre:*,useFrames:Boolean): 
.duration(value:Number):
.endTime(includerPepeat:Boolean):
eventCallback(type:String,callback:Function,params:Array,scope:*):
TweenLite.from( target:Object, duration:Number, vars:Object):
TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object):
TweenLite.getTweenOf(target:*, onlyActive:Boolean):
.invalidate(): 刷新所有内部记录的开始/结束值，如果您想重新开始动画而不恢复到任何先前记录的起始值
.isActive():
.kill(vars:Object, target:Object)
TweenLite.killDelayedCallTo(func:Function):
TweenLite.killTweenOf(target:Object, onlyActive:Boolean, vars:Object):
TweenLite.lagSmoothing(threshold:Number, adjustedLag:Number): 允许您控制引擎的两次滴答（更新）之间时间
.pause(atTime:*, suppressEvents:Boolean): 如果为true（默认值），则当播放头移动到atTime参数中定义的新位置时，不会触发事件或回调
.paused(value:Boolean):
.play(from:*, suppressEvents:Boolean):
.progress( value:Number, suppressEvents:Boolean):
TweenLite.render(): 如果您设置了一堆from（）补间，然后您需要强制立即渲染
.restart( includeDelay:Boolean, suppressEvents:Boolean ):
.resume(from:*, suppressEvents:Boolean):
.reverse(from:*, suppressEvents:Boolean):
.reversed(value:Boolean):
.seek(time:*, suppressEvents:Boolean):
TweenLite.set(target:Object, vars:Object):
.startTime(value:Number):
.time(value:Number, suppressEvents:Boolean):
.timeScale(value:Number): 用于在动画中缩放时间的因子，其中1 =正常速度（默认），0.5 =半速，2 =倍速等
TweenLite.to(target:Object, duration:Number, vars:Object):
.totalDuration(value:Number): 仅在TweenMax和TimelineMax中可用
.totalProgress(value:Number, suppressEvents:Boolean): 获取或设置动画的总进度，该进度是介于0和1之间的值
.totalTime(time:Number, suppressEvents:Boolean):仅在TweenMax和TimelineMax中可用

玻璃破碎效果-轮播图及TweenLite基础

需要资源

扩展

TweenLite

猜你喜欢