组件动画
更新时间：
除了提供常规的 CSS 样式动画，蓝河系统还具备 JS 组件动画的方法。相比于 CSS 样式动画，这种动画方式拥有更为灵活、个性化的逻辑控制能力，可以轻松实现各种精彩、生动的元素动态效果，丰富页面交互和用户体验。此外，我们的 JS 组件动画对于响应式界面设计也提供了更佳的支持，将会为您的项目开发带来更大的便捷和效率。
Element.animate()
这是一个创建新 Animation 的便捷方法，将它应用于元素，会返回一个新建的 Animation 对象实例；调用其 play 方法，即可执行动画，表现为一系列简单的变换 （位置、大小、旋转角度、背景颜色和不透明度）。
语法
const element = this.$element('elementIdName')
const animation = element.animate(keyframes, options)
animation.play()复制代码
参数
keyframes 关键帧
代表关键帧的一个数组集合。目前支持的属性有：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | <number> |
- | 动画执行后应用到组件上的宽度值。 |
| height | <number> |
- | 动画执行后应用到组件上的高度值。 |
| opacity | <number> |
1 | 动画执行后应用到组件上的不透明度值介于 0 到 1 间的数值。 |
| transformOrigin | <String> |
'50% 50%' | 定义变化过程的中心点。 第一个参数代表 x 轴，第二个参数代表 y 轴，单位 px 或百分比值； |
| transform | <object> |
- | 定义应用在元素上的变换类型，支持下表列出的属性。 |
如上 transform 参数说明如下：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| translate/translateX/translateY | <length> |
- | 指定元素要移动到的位置，例如: translate: 10px 10px, translateX: 10px,translateY: 10px |
| scale/scaleX/scaleY | Number | - | 按比例放大或缩小元素，例如：scale: 1.5, scale: 1.5 2, scaleX: 2, scaleY: 2 |
| rotate | <deg> |
- | 指定元素将被旋转的角度，例如： rotate: 45deg |
const keyframes = [
{
transform: '{scaleX:1, scaleY:1}',
},
{
transform: '{scaleX:2, scaleY:2}',
},
]复制代码
options 可选项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| id | <string> |
从'0'开始自减的 string | 动画 id。为减小内存消耗，请开发者尽可能使用该字段复用动画。注：1. 复用动画后，被复用的前一个动画的 onfinish 等实例事件将被清除，不被触发； 2. 请勿使用从'0'开始自减的 string 作为 id，以免与引擎内部 id 重复。 |
| delay | <number> |
0 | 延迟动画开始的毫秒数。 |
| fill | "forwards" | "none" | "none" | 在动画完成播放（"forwards"）之后保留，"none" 重复动画播放 |
| duration | <number> |
0 | 每次迭代动画完成所需的毫秒数。如果此值为 0，则不会运行动画。 |
| easing | linear | ease | ease-in | ease-out | ease-in-out | 自定义 cubic-bezier，例如cubic-bezier(0.42, 0, 0.58, 1) |
linear | 动画的变化率，随着时间的推移而变化。 |
实例方法
| 方法 | 参数 | 描述 |
|---|---|---|
| play | - | 开始执行动画 |
| finish | - | 结束动画 |
| pause | - | 暂停动画 |
| cancel | - | 取消动画 |
| reverse | - | 反转动画执行方向 |
实例事件
| 事件 | 描述 | 示例 |
|---|---|---|
| cancel | 动画被取消 | animation.oncancel = () => { //do something } |
| finish | 动画执行结束 | animation.onfinish = () => { //do something } |
示例 Demo
<template>
<div class="page-wrapper">
<input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" />
<text id="animation">{{ mTextState }}</text>
</div>
</template>
<script>
let $animation = null
export default {
data: {
mTextState: 'Init',
},
onCallAnimationClick() {
const keyframes = [
{
transform: {
translateX: 0,
translateY: 0,
},
},
{
transform: {
translateX: '100px',
translateY: '100px',
},
},
]
const options = {
duration: 1000,
easing: 'linear',
delay: 0,
}
const cAnimationNode = this.$element('animation')
$animation = cAnimationNode.animate(keyframes, options)
// 将会延迟至 (delay + startTime) ms 后执行动画；
$animation.startTime = 1000
this.mTextState = $animation.playState
$animation.oncancel = () => {
this.mTextState = $animation.playState
}
$animation.onfinish = () => {
this.mTextState = $animation.playState
}
$animation.play()
},
}
</script>
<style>
.page-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
color: #20a0ff;
background-color: #ffffff;
padding: 10px 20px;
border: 1px solid #20a0ff;
border-radius: 40px;
}
</style>复制代码