Animation

基础库版本 3.34.0 开始支持，且只支持在cover-*组件中添加animation属性生效，cover-view、cover-image、cover-input、cover-textarea、cover-label、cover-button、cover-svga。

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

方法

animation.opacity(number)

透明度，参数范围 0-1 。示例：animation.opacity(0.5)

animation.backgroundColor(string)

颜色值。示例：animation.backgroundColor('#DC143C')

animation.width(string/number)

长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.width('20px')

animation.height(string/number)

长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.height('70px')

animation.matrix(Number sx, Number ay, Number ax, Number sy, Number tx, Number ty)

由指定的 6 个值组成的 2D 变换矩阵，同 transform-function matrix

animation.matrix3d(Number a1, Number b1, Number c1, Number d1, Number a2, Number b2, Number c2, Number d2, Number a3, Number b3, Number c3, Number d3, Number a4, Number b4, Number c4, Number d4)

以 4x4 齐次矩阵的形式定义一个 3D 转换，同 transform-function matrix

animation.rotate(Number deg)

从原点顺时针旋转一个角度，同 transform-function rotate

animation.rotate3d(Number x, Number y, Number z, Number deg)

从固定轴顺时针旋转一个角度，同 transform-function rotate3d

animation.rotateX(Number deg)

从 X 轴顺时针旋转一个角度

animation.rotateY(Number deg)

从 Y 轴顺时针旋转一个角度

animation.rotateZ(Number deg)

从 Z 轴顺时针旋转一个角度

animation.scale(Number sx, Number sy)

缩放

animation.scale3d(Number sx, Number sy, Number sz)

缩放

animation.scaleX(Number sx)

缩放 X 轴

animation.scaleY(Number sy)

缩放 Y 轴

animation.scaleZ(Number sz)

缩放 Z 轴

animation.skew(Number ax, Number ay)

对 X、Y 轴坐标进行倾斜

animation.skewX(Number ax)

对 X 轴坐标进行倾斜

animation.skewY(Number ay)

对 Y 轴坐标进行倾斜

animation.translate(Number tx, Number ty)

平移变换

animation.translate3d(Number tx, Number ty, Number tz)

对 X、Y、Z 坐标进行平移变换

animation.translateX(Number tx)

对 X 轴平移

animation.translateY(Number ty)

对 Y 轴平移

animation.translateZ(Number tz)

对 Z 轴平移

animation.export()

导出动画队列

animation.step(Object object)

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画|

动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

动画 item

每一个 step 中可以有多个动画 item，每一个 item 的值可以通过调用相同 API 多次修改。

我们将动画 item 分为两类，会更改 style 的 item 与不会更改 style 的 item。

一组动画完成时这组动画中的 style 变化更新至 dom 节点。同时 cover-view 根节点在动画过程中修改其 width/height 是无效的，修改除 width/height 以外的其他 style 会取消正在执行的动画，并立即应用修改后的 style。 尽管一组动画时同时执行的，但对于 transform 动画 而言，相同的 API 不同调用顺序也会影响其动画过程与最终表现。每个 API 参与计算的顺序由该 API 第一次在这个 step 出现的时机为准，参与计算的值由这个 step 中最后一次调用时传入的值为准。

案例 1

const anim = bl.createAnimation();
anim.translateX(100).rotate(45).translateX(200).step();

一共有两个 item： translateX(200)、rotate(45)。 参与计算时，先计算 translateX（先出现），再计算 rotate。

案例 2

const anim = bl.createAnimation();
anim.scaleY(2).rotate(-45).translateX(100).scaleY(1.5).step();

一共有三个 item： scaleY(1.5)、rotate(-45)、translateX(200)。 参与计算时，先计算 scaleY（最先出现），然后是rotate（第二个出现），最后是 translateX（最后出现）。

如何为一个 cover-view 添加动画

创建 Animation 对象后，可以通过调用其方法来添加动画 item，并使用 step() 方法来将动画分组，完成后使用 export() 将动画导出。最后将 export() 返回的动画唯一标识符绑定至 cover-view 节点的 animation 属性后，动画将自动开始执行。

如何取消一个 cover-view 的动画

1. 将指定 cover-view 的 animation 属性置为空字符串（推荐）；
2. 更改节点的 style (根节点执行动画过程中将忽略宽高修改，修改其他 style 方可取消动画)；
3. 更改可能会影响布局变化的 attribute (如 cover-label 的 text)；
4. 旋转屏幕；

示例代码

<template>
    <div class="animation-element-wrapper">
        <cover-view :animation="animationData">
            <cover-label>测试</cover-label>
        </cover-view>
    </div>
</template>
<script>
export default {
    data() {
        return{
            animationData: '',
            animation: null
        }
    },
    onReady() {
        // 创建动画实例
        this.animation = bl.createAnimation({
            transformOrigin: '50% 50% 0',
            duration: 500,
            timingFunction: 'ease',
            delay: 0
        });
    },
    methods: {
        animate: function() {
            // 添加动画 item 并分组
            this.animation.rotate(90).translateY(10).step();
            // 添加动画 item ，分组，并指定组自定义 config
            this.animation.scale(2).skewX(45).step({duration: 1000});
            // 导出动画
            const animationId = this.animation.export();
            // 绑定动画
            this.animationData = animationId;
        }
    }
}
</script>

注意：

针对 Android 基础库版本 3.34.0 ，做以下说明

1. Z 轴（rotateZ 、scaleZ ）相关 API 未支持
2. 3D（matrix3d、rotate3d、scale3d） 相关 API 未支持
3. timingFunction 中 step-start 以及 step-end 未支持
4. rotate & translate 未做叠加支持、 矩阵和普通 transform 未做叠加支持