标准设备应用开发——
动画与音乐
讲师:林嘉诚
高级工程师
01 标准设备应用开发—HelloWorld
02 标准设备应用开发—布局与基础组件
03 标准设备应用开发—动画与音乐
04 标准设备应用开发—Native Api
05 标准设备应用开发—分布式介绍
06 标准设备应用开发—分布式上手
动画简介
动画实战
音乐播放怎么做
音乐播放实战
组件的通用属性发生变化时,
会创建属性动画进行属性渐
变
页面切换时的过渡动画
给组件自定好svg路径字符
后,组件会跟随路径进行
运动
组件通用属性
尺寸设置 位置设置 布局约束 Flex布局 图形变换
边框设置 背景设置 透明度设置 图像效果 ……
X 轴
Z 轴
Y 轴
名称
参数类型
默认值
描述
rotate
{
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
}
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
}
(x, y, z)指定一个向量,表
示旋转轴,正角度为顺时针
转动,负角度为逆时针转动,
默认值为0,同时可以通过
centerX和centerY设置旋
转的中心点。
属性动画使用方式
1. 显示动画
调用全局animateTo接口
接口说明
animateTo(
value:AnimationOption,
event: ()=> void
) : void
属性动画使用方式
2. 在UI组件中编写animation属性
编写组件
调用animateTo动
画接口
绑定点击事件