zoukankan      html  css  js  c++  java
  • CoronaSDK最牛逼的动画库transitionsLib

    1 transitionsLib之特性

    • 暂停、恢复或取消一个动画(或所有动画)
    • 为动画设置tag,允许多个动画共用同一个tag,使用tag来获取和操作动画
    • 以对象为粒度的动画操作,可以同时控制一个对象上所有的动画
    • 42种趋势(easing)函数,允许你以不同的方式来间补(插值)你的动画,例如二次函数、指数函数、伸缩方式、弹跳方式等
    • 拥有一些便捷函数,如blink(), moveTo(), moveBy(),等

    2 基本transition

    一个基本的transition可以以下面两种方式进行初始化:

    • transition.to( target, params ):这个方式会使用一个可选的趋势函数来变换一个displayObject或GroupObject,即在一段时间内移动、旋转、淡入淡出或伸缩
    • transition.from( target, params ):这和上面的方式相似,只是params里指定的值是初值,而在函数调用一刻对象的属性是终值。

    第一个参数target,就是你打算变换(使其动起来)的display或group对象。

    第二个参数params 是tagert的属性,以及下列名值对组成的表。这些特殊字段含义如下:

    字段名 描述
    time 指定动画经历的时间,单位是毫秒。
    delay 指定动画开始前的毫秒延时,默认是0.
    delta 指定对象的属性值,是否是相对数,默认为nil即false。设置成true属性值就成了相对值,否则是绝对值。
    iterations 动画应该重复的次数。0或-1都会导致无限次重复。
    tag 允许你设置的字符串,用来分类你的动画并分组控制他们。
    transition 为你的transition指定趋势(easing)函数,以决定起始属性以何种方式变成最终属性。

    动画动作对应要修改的对象属性,下表已经列出:

    方式 属性(key) 描述
    位移 x,y 从当前x/y移动到心的x/y
    旋转 rotation 把当前角度旋转到新的角度
    淡入淡出 alpha 把当前alpha值变成新的alpha值
    伸缩 xScale,yScale 把x和y伸缩到新的比例
    调整大小 width,height 把当前宽度和高度调节到新的宽度和高i度

    注意,动画进程中的动画事件如下表所列。这些事件发生时就会激发指定的监听函数。同时在调用时,对象引用也会作为监听函数的唯一参数传入:

    事件 描述
    onStart 当Transition开始时被调用
    onComplete 当Transition结束时被调用
    onPause 当Transition被暂停时调用
    onResume 当Transition被恢复时调用
    onCancel 当Transition被取消时调用
    onRepeat 当Transition完成一次重复周期时

    下面是一些例子:

    1) 在100毫秒内从当前位置,移动到y=100:

    transition.to( myObject, { time=2000, y=100 } )

    2)在2秒内,在y方向(垂直)向下移动100,这里用的是y进行相对改变:

    transition.to( myObject, { time=2000, y=100, delta=true } )

    3)2秒之内从当前位置移动到y=400的位置(outElastic表示到达目的后弹一弹),如此动作重复四次:

    transition.to( myObject, { time=2000, y=400, iterations=4, transition=easing.outElastic } )

    4)在4秒内从当前位置移动到x=200的位置并回到原处(continuousLoop 表示连续来回):

    transition.to( myObject, { time=4000, x=200, transition=easing.continuousLoop } )

    5)在2秒内,同时旋转45度,同时把y方向上延长2倍,同时透明度变成50%:

    transition.to( myObject, { time=2000, rotation=45, yScale=2, alpha=0.5 } ) 

    重要提示:

    一些对象在transition期间并不会如你所愿。举个例子,许多widget并不支持伸缩或声明后修改大小,所以你对这些对象不能使用xScale、yScale、width、height这些属性。另一个例子是物理physics body:如果你用transition来伸缩或修改物理对象的大小实际的physics body将不会连同transiztion一起伸缩。

    3 控制Transition

    动画在结束前,可以被暂停、恢复和取消。传给控制函数的参数,将决定控制的目标范围。

    • 暂停:transition.pause(target)
    • 恢复:transition.resume(target)
    • 取消:transition.cancel(target)

    这三个控制函数中的参数tagert可以为以下形式:

    参数 范围
    (none) target指向所有运行中的transition
    transition reference target指向一个具体的transition,控制这个transition
    object reference target指向一个display或group对象,控制这个对象上所有的transition
    tag name(string) 指向所有tag和此字串一致的transition

    4 趋势函数

    默认情况下,从初值到终值的变化过程,是一个随时间线性改变的函数。

    然而,你可以指定一个趋势函数来达到不同的效果,例如让一个对象快速地开始又逐步慢下来到达目的地。

    设置方式如下:

    --二次插值
    transition.to( myObject, { time=2000, y=100, transition=easing.outQuad } )
    
    --以指数插值的方式
    transition.to( myObject, { time=2000, y=100, transition=easing.inOutExpo } )

    5 Transition事件

    • onStart
    • onComplete
    • onPause
    • onResume
    • onCancel
    • onRepeat

    代码示例如下:

    local myObject = display.newRect( 0, 0, 100, 100 )
    
    local function completeListener ( obj )
        --when this function is invoked, the object reference is passed instead of an 'event' table
        print( "Transition completed on object: " .. tostring( obj ) )
    end
    
    transition.to( myObject, { time=2000, alpha=0, onComplete=completeListener } )

    重要提示:

    如果你从内存里删除或清除了一个发生动画的display对象,并且这个Transition有一个onComplete事件,这个监听函数仍然会被调用,尽管对象已经不在屏幕上了。所以,如果对象被强行删除,其Transition事件有可能会造成程序崩溃(事件里可能还在继续访问对象)。所以,正确的做法是,在删除对象之前先cancel这个对象上所有的Transition。即先transition.cancel(object)会很有帮助。

    在更大的范围里,你还应该考虑在场景转场或模块被清除时,不带参数调用transition.cancel()以清除所有的Transition。

    6 快捷函数

    函数 描述
    transition.blink() 闪烁
    transition.dissolve() 溶解
    transition.fadeIn() 淡入
    transition.fadeOut() 淡出
    transition.moveBy() 移动
    transition.moveTo() 移到
    transition.scaleBy() 伸缩
    transition.scaleTo() 伸缩到
  • 相关阅读:
    wordpress取文章时间
    一个链接引发的血案---------服务器 IO及网络流量暴涨解决历程
    wordpres 自定义comment样式
    HTML中head里的内容经浏览器解析后全到body里了
    mir9-lua——《热血沙城》45度ARPG手游-Lua移植版
    MoonWarriors-lua——《雷电战机》游戏-Lua移植版
    《QQ欢乐斗地主》山寨版
    最好的ie版本检测方式
    css 超出部分显示省略号
    分享一个jquery插件,弥补一下hover事件的小小不足
  • 原文地址:https://www.cnblogs.com/leezj/p/4234367.html
Copyright © 2011-2022 走看看