Appearance

目录

Animation ​

动画相关组件。包括以下两个组件：

动画类型 ​

上面两个动画组件，均支持以下几种动画类型，通过组件对象的构造函数参数传入：

  • position - 平移动画，单位：px、hm、dp/pt
  • scale - 缩放动画（x轴和y轴同时）
  • scaleX - 缩放动画（x轴）
  • scaleY - 缩放动画（y轴）
  • rotationX - 旋转动画（x轴），单位：度
  • rotationY - 旋转动画（y轴），单位：度
  • rotationZ - 旋转动画（z轴），单位：度
  • opacity - 透明度动画，取值为[0, 1]（0-全透明, 1-不透明）
  • backgroundColor - 背景色动画
  • width - 宽度动画
  • height - 高度动画

BasicAnimation ​

基础动画组件

属性 ​

属性名类型默认值说明示例
valuenumber|string|Object属性值position: anim.value = { x: 120, y: -70 };
scale: anim.value = 1.8;
rotationX: anim.value = 180;
opacity: anim.value = 0.8;
backgroundColor: anim.value = "#0000ff80";
durationnumber0动画持续时间（单位：秒）anim.duration = 2;
delaynumber0动画延时（单位：秒）anim.delay = 2;
repeatCountnumber1动画重复次数

<0: 无限次
0、1: 动画做1次
2: 动画做2次		anim.repeatCount = 2;
easingstring'ease'动画运动速率曲线anim.easing = 'linear';

linear: 线性运动
ease: 先加速后减速（结束时会特别慢）
ease-in: 加速运动
ease-out: 减速运动
ease-in-out: 先加速后减速

方法 ​

js
/**
 * 动画执行开始或结束时的回调
 *
 * @param event 事件类型（'start' 或 'end'）
 * @param callback 事件回调
 */
on(event: string, callback: () => void);

示例 ​

js
var animView = new View();
animView.style = {
    width: 120,
    height: 120,
    backgroundColor: "#FF000080",
};

// position
let anim = new BasicAnimation('position');
anim.value = { x: 120, y: -70 };
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key1');

// scale/scaleX/scaleY
let anim = new BasicAnimation('scale');
anim.value = 1.8;
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key2');

// rotationX/rotationY/rotationZ
let anim = new BasicAnimation('rotationX');
anim.value = 180;
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key3');

// opacity
let anim = new BasicAnimation('opacity');
anim.value = 0.6;
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key4');

// backgroundColor
let anim = new BasicAnimation('backgroundColor');
anim.value = "#0000ff80";
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key5');

// width/height
let anim = new BasicAnimation('width');
anim.value = 200;
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(ani, 'key6');

// callback
anim.on("start", () => {
    console.log("Animation is started");
});
anim.on("end", () => {
    console.log("Animation on finished");
});

// remove animation
animView.removeAnimation('key1');

KeyframeAnimation ​

关键帧动画组件

属性 ​

属性名类型默认值说明示例
keyframesArray<KeyFrame>关键帧详见 KeyFrame
durationnumber0动画持续时间（单位：秒）anim.duration = 2
delaynumber0动画延时（单位：秒）anim.delay = 2
repeatCountnumber1动画重复次数

<0: 无限次
0、1: 动画做1次
2: 动画做2次		anim.repeatCount = 2;
easingstring'ease'动画运动速率曲线anim.easing = 'linear';

linear: 线性运动
ease: 先加速后减速（结束时会特别慢）
ease-in: 加速运动
ease-out: 减速运动
ease-in-out: 先加速后减速

KeyFrame ​

属性名类型默认值说明示例
valuenumber|string|Object属性值同 BasicAnimation#属性 中的value
percentnumber0关键帧百分比{ percent: 0.3 }

方法 ​

同 BasicAnimation#方法

示例 ​

js
var animView = new View();
animView.style = {
    width: 120,
    height: 120,
    backgroundColor: "#FF000080",
};

// position
let anim = new KeyframeAnimation('position');
anim.keyframes = [{
    percent: 0,
    value: { x: 0, y: 0 },
}, {
    percent: 0.2,
    value: { x: 30, y: 0 },
}, {
    percent: 0.6,
    value: { x: 30, y: 60 },
}, {
    percent: 0.8,
    value: { x: 100, y: 60 },
}, {
    percent: 1.0,
    value: { x: 100, y: 0 },
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key1');

// scale/scaleX/scaleY
let anim = new KeyframeAnimation('scale');
anim.keyframes = [{
    percent: 0.2,
    value: 0.5,
}, {
    percent: 0.4,
    value: 1.1,
}, {
    percent: 1,
    value: 1.8,
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key2');

// rotationX/rotationY/rotationZ
let anim = new KeyframeAnimation('rotationX');
anim.keyframes = [{
    percent: 0.2,
    value: 180,
}, {
    percent: 0.4,
    value: 270,
}, {
    percent: 1,
    value: 360,
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key3');

// opacity
let anim = new KeyframeAnimation('opacity');
anim.keyframes = [{
    percent: 0.2,
    value: 0.5,
}, {
    percent: 1,
    value: 1,
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key4');

// backgroundColor
let anim = new KeyframeAnimation('backgroundColor');
anim.keyframes = [{
    percent: 0.2,
    value: "#ff000080",
}, {
    percent: 0.4,
    value: "#ffffff80",
}, {
    percent: 1,
    value: "#0000ff80",
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key5');

// width/height
let anim = new KeyframeAnimation('width');
anim.keyframes = [{
    percent: 0.2,
    value: 170,
}, {
    percent: 0.4,
    value: 200,
}, {
    percent: 1,
    value: 150,
}];
anim.duration = 3;
anim.delay = 1;
anim.repeatCount = 1;
anim.easing = 'linear';
animView.addAnimation(anim, 'key5');

// callback
anim.on("start", () => {
    console.log("Animation is started");
});
anim.on("end", () => {
    console.log("Animation on finished");
});

// remove animation
animView.removeAnimation('key1');