-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathfn.animate.html
132 lines (128 loc) · 5.69 KB
/
fn.animate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>animate</title>
<style type="text/css">
#test{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="avalon.js"></script>
<script>
require(["mmAnimate","ready!"], function() {
avalon.define("fx", function(vm) {
vm.effect = function() {
avalon(this).animate({
width: 200,
height: 200
}, 2000,{revert: true, count: 2})
}
})
avalon.scan()
})
</script>
</head>
<body>
<article>
<h3>avalon.fn.animate</h3>
<p><span class="stress">描述：</span></p>
<p>对元素的某些样式或属性进行动画。</p>
<p>有两种传参方式:</p>
<ul>
<li>properties [, duration ] [, easing ] [, complete ]</li>
<li>properties , options</li>
</ul>
<p>最后都在内部被整齐成下面那一种。</p>
<p><span class="stress">参数：</span></p>
<dl>
<dt>properties</dt>
<dd>必需。Object样式集合。如width, height, color, fontSize, opacity等。</dd>
<dt>options</dt>
<dd>必需。Object。各种配置。</dd>
</dl>
<p><span class="stress">返回值：</span></p>
<p>avalon实例</p>
<p>options里面的参数一览：</p>
<table class="table1">
<tr><th>键名</th><th>值</th></tr>
<tr><td>easing</td><td>缓动公式的名字，将作用于所有CSS属性或scrollTop,scrollLeft，当然可以在这些属性上用数组进行单个指定。</td></tr>
<tr><td>duration</td><td>动画时长。</td></tr>
<tr><td>step</td><td>每次执行补间后执行的回调函数。</td></tr>
<tr><td>compete</td><td>动画结束时的回调函数。</td></tr>
<tr><td>queue</td><td>是否进行排队，默认true。</td></tr>
<tr><td>revert</td><td>是否开始倒带。</td></tr>
<tr><td>record</td><td>将当前动画设置转录到负向列队，从而实现多个动画的倒带。</td></tr>
</table>
<hr/>
<p>step, compete这三个回调的参数情况:</p>
<table class="table">
<tr><th>参数名(按先后顺数排列)</th><th>说明</th></tr>
<tr><td>node</td><td>当前执行动画的元素节点，当然我们也可以直接在回调函数使用this取得它</td></tr>
<tr><td>fx</td><td>动画实例,它拥有startTime, node, duration, gotoEnd, props, revert, orig等属性。</td></tr>
</table>
<hr/>
<p>fx对象所拥有的属性：</p>
<table class="table1">
<tr><th>属性名</th><th>说明</th></tr>
<tr><td>node</td><td>元件,可以是元素节点或canvas中的图形</td></tr>
<tr><td>startTime</td><td>动画开始时间,单位毫秒</td></tr>
<tr><td>duration</td><td>动画时长,单位毫秒</td></tr>
<tr><td>gotoEnd</td><td>是否立即结束,默认false</td></tr>
<tr><td>revert</td><td>是否要回放动画,默认false</td></tr>
<tr><td>positive</td><td>正向子列队,数组,用于向主列队添加动画</td></tr>
<tr><td>negative</td><td>负向子列队,数组,用于向正向子列队添加动画</td></tr>
<tr><td>props</td><td>要渐变的属性,一个对象数组,每个对象包含属性名,起始值（from），结束值(to)，单位(unit)，
类别(type)与对应的缓动公式(easing)</td></tr>
</table>
<div id="test" class="animate" ms-controller="fx" ms-click="effect" ></div>
<pre class="brush:js;gutter:false;toolbar:false">
require(["mmAnimate"], function(avalon) {
avalon.define("fx", function(vm) {
vm.effect = function() {
avalon(this).animate({
width: 200,
height: 200
}, 2000).animate({
width: 100,
height: 100
}, 2000)
}
})
avalon.scan()
})
</pre>
<p>上面代码相当于</p>
<pre class="brush:js;gutter:false;toolbar:false">
require(["mmAnimate"], function(avalon) {
avalon.define("fx", function(vm) {
vm.effect = function() {
avalon(this).animate({
width: 200,
height: 200
}, 2000, {revert: true})
}
})
avalon.scan()
})
</pre>
<p>上面的JS代码相当于以下CSS代码：</p>
<pre class="brush:css;gutter:false;toolbar:false;">
/* 此动画先放大再缩回原状*/
.animate{
animation-duration:3s;
animation-name: cycle;
animation-iteration-count:2;
animation-direction:alternate;
}
@keyframes cycle{
to{
width:200px;
height:200px;
} }
</pre>
</article>
</body>
</html>