动画

1.前言 由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点： 动画自由度：canvas胜； 复杂度：canvas胜； 兼容性：canvas胜； 性能：css3胜（requestAnimationFrame和硬件加速）。 由于对于性能有一定的要求，canvas对比css3会有更多的计算量导致性能可能不太好，所以选用css3模拟下雪效果（ps：能用css解决的问题就不用javascript解决哈哈）。 对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过，跟着创业头子混过。想把自己的技术分享给大家，如果你还在迷茫，也希望能进我一些绵薄之力，帮助到你。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端 2.原理 本文所采用的是css3的animation。为dom元素添加animation属性就可以模拟动画，例如w3school的例子： animation 当然这谁都会，但有个问题是，下雪并不是机械的下落，而是有快有慢、摆动幅度、时间不定，这里的重点是需要构造随机性，理性分析下。

描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 ease-in-out 开始和结束时慢速 3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。无限：infinite 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。Alternate逆向 3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 前缀：-webkit-，用于/* Safari 和 Chrome */动画定义：-webkit-animation：name duration ...动画实现：

http://robertpenner.com/easing/easing_demo.html 来源： https://www.cnblogs.com/-831/p/11367755.html

2019年8月16日 钩子函数主要就是这三个函数 /* 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素， 是个原生的JS DOM对象 */ /*相当于document.getElememtById('')获取的*/ /*beforeEnete表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中，设置元素开始动画之前的起始样式*/ beforeEnter ( el ) { el . style . transform = "translate(0,0)" /*设置小球的起始位置*/ } , /*enter表示动画开始之后的样式，这里可以设置小球完成后的结束状态*/ enter ( el , done ) { el . offsetWidth /*可以认为强制动画刷新*/ el . style . transform = "translate(150px,450px)" el . style . transition = 'all 0.4s ease' done ( ) /*这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用*/ } , afterEnter ( el ) { this . flag = false } /*动画完成之后的事件*/ 正因为在afterEnter里边设置了flag

最近做小程序时，会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果，但是体验性太差，也比较简单粗暴。想要美美地玩，添加点动画还是非常有必要的。下面做一个底部上滑的弹框。 wxml <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view> </view> <button bindtap="showModal">点我</button> wxss /*模态框*/ .modals{position:fixed; z-index: 999; top:0; left: 0; right:0; bottom: 0;} .modals-cancel{position:absolute; z-index:1000; top:0; left: 0; right:0; bottom: 0; background-color: rgba(0,0,0,.5);} .bottom-dialog-body{position:absolute; z-index

transition 过渡动画 div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } 来源： https://www.cnblogs.com/caitangbutian/p/11362944.html

https://lrh1993.gitbooks.io/android_interview_guide/content/android/basis/animator.html 来源： https://www.cnblogs.com/lixiansheng/p/11359933.html

今天遇到了一个问题，就是有一个界面，在生成时之前请求数据，在界面中通过schedule 与unschedule不停查看本地是否收到此数据（通过发起request的Id），当收到之后刷新。 然后就引起了一个问题。界面弹出是有动画的，在动画从小到大的过程中收到数据，动画会卡顿，paint界面，然后动画继续。 为了解决此问题我用scheduleOne，延迟一段时间（大概数据已经到了）之后再生成界面。但这样会有点击后的延迟，造成点击的不真实。 也想过收到数据时抛事件，但这样也很有可能卡顿动画。 最后决定在界面里得onEnter加入request，然后用schedule与schedule 每隔一段时间（为了动画的流畅，时间要多试几次） update 一次。 来源： https://www.cnblogs.com/guomengkai/p/11358509.html

1. svg基本图形有7种 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 其中，path可以绘制任意图形 2. svg描边动画原理 svg的描边动画就是利用stroke-dasharray和stroke-dashoffset两个属性值的变化来实现的。 2.1 stroke-dasharray用来画虚线 stroke-dasharray: 实线长度 虚线长度，可以设置多个值，奇数自动重复一遍补成偶数，即 stroke-dasharray: 10 等价于 stroke-dasharray: 10 10 2.2 stroke-dashoffset用来控制虚线的偏移 2.3 描边动画原理 当stroke-dasharray和stroke-dashoffset都足够大，大于线条的长度，则stroke-dashoffset从固定值变化到0的过程，线条就会从无到伸展到其长度。如果svg线条 为path，则可以实现任意复杂图形的描边动画。 2.4 下面是几个例子 2.4.1 鼠标hover画直线 <svg> 　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke

Unity3d 4.0中采用了新的Mecanim 动画系统，使用传统的动画时需要注意导入带动画的模型后要设置，Rig选项下的AniamationType为Generic类型。 如下图: 转载于:https://www.cnblogs.com/WilliamJiang/archive/2013/03/19/2968687.html 来源： https://blog.csdn.net/weixin_30726161/article/details/99616934