Skip to main content

my.createAnimation

createAnimation

Last updated on

my.createAnimation là API để tạo ra một animation instance.

Animation instance sử dụng các hàm của nó để mô tả animation và cuối cùng, sử dụng hàm export để truyền thuộc tính animation vào các view trên TXML.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

API Params

Thuộc tínhKiểu dữ liệuMô tả
durationNumberThời gian để animation được thực hiện, mặc định là 400ms
timeFunctionStringHiệu ứng để thực hiện animation, có thể nhận các giá trị: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end. Mặc định là linear.
delayNumberAnimation delay time. Đơn vị tính mili giây.
transformOriginstringGiá trị ban đầu của CSS transform.

Sample Code

.animation-element {
width: 100px;
height: 100px;
background: red;
}
<view class="page">
<view class="page-description">Animation</view>
<view class="page-section">
<view class="page-section-title">my.createAnimation</view>
<view class="page-section-demo">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="rotate">Rotate/view>
<view type="primary" onTap="scale">Scale</view>
<view type="primary" onTap="translate">Translate</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="skew">Skew</view>
<view type="primary" onTap="rotateAndScale">Rotate and scale</view>
<view type="primary" onTap="rotateThenScale">Rotate then scale</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="all">All animation</view>
<view type="primary" onTap="allInQueue">All in queue</view>
<view type="primary" onTap="reset">Reset</view>
</view>
</view>
</view>
Page({
onReady() {
this.animation = my.createAnimation();
},
rotate() {
this.animation.rotate(Math.random() * 720 - 360).step();
this.setData({ animation: this.animation.export() });
},
scale() {
this.animation.scale(Math.random() * 2).step();
this.setData({ animation: this.animation.export() });
},
translate() {
this.animation
.translate(
Math.random() * 100 - 50,
Math.random() * 100 - 50
)
.step();
this.setData({ animation: this.animation.export() });
},
skew() {
this.animation
.skew(Math.random() * 90, Math.random() * 90)
.step();
this.setData({ animation: this.animation.export() });
},
rotateAndScale() {
this.animation
.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.step();
this.setData({ animation: this.animation.export() });
},
rotateThenScale() {
this.animation
.rotate(Math.random() * 720 - 360)
.step()
.scale(Math.random() * 2)
.step();
this.setData({ animation: this.animation.export() });
},
all() {
this.animation
.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.translate(
Math.random() * 100 - 50,
Math.random() * 100 - 50
)
.skew(Math.random() * 90, Math.random() * 90)
.step();
this.setData({ animation: this.animation.export() });
},
allInQueue() {
this.animation
.rotate(Math.random() * 720 - 360)
.step()
.scale(Math.random() * 2)
.step()
.translate(
Math.random() * 100 - 50,
Math.random() * 100 - 50
)
.step()
.skew(Math.random() * 90, Math.random() * 90)
.step();
this.setData({ animation: this.animation.export() });
},
reset() {
this.animation
.rotate3d(0, 0, 0, 0)
.rotateX(0)
.rotateY(0)
.rotateZ(0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 });
this.setData({ animation: this.animation.export() });
}
});