42

左边敲打IDE！右边出现了一个世界!!!

 5 years ago
source link: https://juejin.im/post/5df2023cf265da33c028a9d4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
2019年12月12日阅读 4322

左边敲打IDE！右边出现了一个世界!!!

从(3°58′20″N，112°16′53″E) 到(53°33′34.51″N,123°17′22.29″E) 一首《野狼disco》火到老少皆知。

细细评味歌词中隐约透露出对程序员的无限赞美尤其是前端，看看眼前的你，左边敲打IDE,右边出现了一个完美界面（app,网页）

年底将至各大公司会通过动画结合数据绘制出一张张靓丽的年终报告。

借助动画对象Animation,程序员就是一位艺术家。

以转盘组件为例，一起揭开Animation在微信小程序中的神秘面纱。

Animation

有请猪角Animation 微信提供给我开发者一个开发动画的类，借助它我们就可以画转盘。

第一步:wx.createAnimation方法用于创建Animation类并且设定基础属性。

 //创建动画
      let animationRun = wx.createAnimation({
        duration: 6,
        timingFunction: 'ease',
        delay:10,
        transformOrigin:"'50% 50% 0'"
      })
复制代码

看到上面的代码你是否有种似曾相识的感觉，想想，再想想，给你点提示css3。

css3 属性transition语法

transition: property duration timing-function delay;

复制代码

于是乎我们似乎得到一个结论：当使用wx.createAnimation创建一个动画时，本质就是在构建css3动画字符串。

上面创建动画的代码就转化成


// css动画字符串
<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition:  6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;
</style>

复制代码

第二步：Animation.rotate 方法用于设定转盘旋转的角度。

let runDeg = 90
animationRun.rotate(runDeg).step();

复制代码

上面代码会在css动画字符串中增加：

transform:rotate(90deg);
-ms-transform:rotate(90deg); 	/* IE 9 */
-moz-transform:rotate(90deg); 	/* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); 	/* Opera */

复制代码

变成完整的css样式

<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition:  6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;


transform:rotate(90deg);
-ms-transform:rotate(90deg); 	/* IE 9 */
-moz-transform:rotate(90deg); 	/* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); 	/* Opera */

</style>

复制代码

第三步：Animation.step 方法用于结束一组动画，以便开始下一组动画。

animationRun.rotate(runDeg).step()

复制代码

该方法会将多个动画样式合并。

<style>
animation1;

animation2;

animation3;
</style>

复制代码

第四步：Animation.export 方法用于导出动画队列。

 this.setData({
        animationData: animationRun.export(),
        btnDisabled: 'disabled'
      });

复制代码

此时本质就是把完整的css3样式赋值到对应的标签style内，打开调试查看wxml。

官方解释：导出动画队列。export 方法每次调用后会清掉之前的动画操作。

但是实际操作发现，在第三步时如果将animationRun赋值可以到达同样的效果，也就是说调用step方法时已经将动画导出。（当然这些是作者结合实践加大胆的猜测，并未得到微信的答复）并且发现export方法也存在问题，并不是官方所说的会清掉之前的动画。查看Wxml会发现样式依旧存在。应该是微信小程序的一个bug,这点也给后续操作带来了一些列的问题。例如动画样式已经是内联样式，自定义样式不易去覆盖。（我们同时先微信团队提出了疑问。）

当我们使用Animation后，如果希望自定义一些css3样式可能会遇到问题，目前建议自己代码清除一些样式。

Animation 本质就是对css3动画样式的基本封装便于在js中灵活控制。

当你看到一大堆简单但是却需要记忆的样式代码时，尝试通过封装之道，让代码变的更加优美。

文章结尾奉献一个转盘组件。完整代码已经附上，喜欢的朋友可以自行引用。

点击查看源码

1

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK