动画 — 补间动画和时间轴

补间动画目标

任一函数中的第一个参数target最常是 显示对象 或 显示组，你想对它进行动画处理。然而，对于更多特殊情况，它还可以是 RectPath 点用于 四边形变形、RGB+A用于 Paint 填充的颜色通道或 fill.effect 属性。

对象属性

第二个参数properties是一个键值对表格。在此表中，指定要更改的每个所需的属性以及它的最终值（如果使用则为animation.from()起始值）。

控制参数

第三个参数params，也对键值对。在此表格中，指定补间的适当控制参数

缓动函数

默认情况下，补间从开始到结束以一致的线性变化率发生。但是，您可能希望使用缓动效果来达到不同的结果，例如，使对象在开始时快速移动，并随着到达目的地而逐渐减慢速度。此行为可以通过在动画调用中与 缓动 函数结合使用来实现。

要在补间上设置缓动效果，只需在 params 表中提供 easing 键，其值等于其中一个 缓动 库函数。例如

-- Tween the object using outward quadratic interpolation
animation.to( myObject,
    { y=100 },
    {
        time = 2000,
        easing = easing.outQuad
    }
)

-- Tween the object using inward and then outward exponential interpolation
animation.to( myObject,
    { y=100 },
    {
        time = 2000,
        easing = easing.inOutExpo
    }
)

补间动画事件

补间还支持以下列出的全系列补间事件。它们应指定为键值在 params 表中的对。当事件发生时，关联的监听器函数将接收到对 补间 对象的引用。

在下例中，当补间完成时，将调用 tweenListener() 函数

local myObject = display.newRect( 0, 0, 100, 100 )

local function tweenListener( obj )
    print( "Tween completed; ID: " .. obj.id )
end

animation.to( myObject,
    { alpha=0 },
    {
        time = 2000,
        id = "tween1",
        onComplete = tweenListener
    }
)

时间轴补间动画

至少 timelineParams 表必须包含一个子表 tweens，其中包含将参与时间线的所有补间

local newTimeline = animation.newTimeline(
{
    tweens = {},
})

在 tweens 表内，通过接受以下内容的基本 Lua 表配置各个补间键值对

• startTime — 时间线进度中（以毫秒为单位）补间应开始的可选 数字。默认值为 0（时间线的开始）。
• tween — 配置补间的必需 表。应与任何基本补间类似地配置该表（参见上面的 补间）.
• useFrom — 可选 布尔 属性，如果将其设置为 true，则会让补间表现得如同由 animation.from() 而不是由 animation.to() 声明的那样。

例如，此 tweens 表配置了时间线的两个独立补间

local newTimeline = animation.newTimeline(
{
    tweens = {
        { startTime=0, tween={ object1, { x=400 }, { time=4000, iterations=5, reflect=true } } },
        { startTime=1000, tween={ object1, { y=400 }, { time=4000, easing=easing.outQuad } } }
    },
})

时间轴标记

为了提高控制水平，可以在时间线持续期间内指定任意多個 标记。这些标记在可选 markers 表内指定，允许你指定跳转至时间线内的点。每个标记应定义为一个 表，其中包含以下属性

• name — 与标记关联的 字符串 名称。此名称应是 唯一的（你不应在同一个时间线内使用重复的标记名称）。
• time — 在时间线进度中（以毫秒为单位）设置标记的 数字。
• params — 可选 表，其中可以包含自定义信息；此表将传递到 onMarkerPass 侦听器函数（详细信息）。

例如，此 markers 表为时间线配置了三个时间标记

local newTimeline = animation.newTimeline(
{
    tweens = {
        { startTime=0, tween={ object1, { x=400 }, { time=4000, iterations=5, reflect=true } } },
        { startTime=1000, tween={ object1, { y=400 }, { time=4000, easing=easing.outQuad } } }
    },
    markers = {
        { name="marker_start", time=0 },    -- Start of the timeline
        { name="marker_2000", time=2000 },  -- 2 seconds into the timeline
        { name="marker_3000", time=3000 }   -- 3 seconds into the timeline
    },
})

其他参数

时间线接受多种其他参数（可选），这些参数可用于微调设置并控制。这些应被指定为键值timelineParams 表内的

时间轴事件

时间轴还支持以下列出的完整 时间轴事件。这些应指定为键值timelineParams 表内的成对。当事件发生时，关联的侦听器函数将收到对 Timeline 对象的引用。

在以下示例中，每当时间轴中每个补间动画的每次迭代完成后，将调用 timelineListener() 函数

local object1 = display.newRect( 50, 50, 100, 100 )

local function timelineListener( obj )
    print( "Timeline completed; ID: " .. obj.id )
end

-- Create a timeline object
local newTimeline = animation.newTimeline(
{
    tweens = {
        { startTime=0, tween={ object1, { x=400 }, { time=4000, iterations=5, reflect=true } } },
        { startTime=1000, tween={ object1, { y=400 }, { time=4000, easing=easing.outQuad } } }
    },
    id = "timeline1",
    onComplete = timelineListener
})

-- Set the timeline playing
newTimeline:resume()