动画

动画(CSS3) 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation : 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 ; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意 @keyframes 动画名称 { from { 开始位置 } 0% to { 结束 } 100% } animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画" 小汽车案例 body { background : white ; } img { width : 200px ; } .animation { animation-name : goback ; animation-duration : 5s ; animation-timing-function : ease ; animation-iteration-count : infinite ; } @keyframes goback { 0% { } 49% { transform : translateX ( 1000px ) ; } 55% { transform : translateX ( 1000px ) rotateY (

vue的过渡动画都要使用transition标签来实现 用一个栗子解释一下这里的动画流程 < div id = " root " > < button @click = " handleClick " > 切换 </ button > < transition name = " fade " > < div v-show = " show " > Hello World </ div > </ transition > </ div > 这个transition标签的工作流程大概如下图 这里的类名的默认应该是 v-enter,v-enter-active等 ，fade开头是因为我给transition的name是fade 在过渡开始前，vue会向transition标签里面的div添加两个class类名 fade-enter,fade-enter-active 然后进行第一帧动画 第一帧动画结束后 vue这时候会删除掉 fade-enter ，然后加上 fade-enter-to 动画继续执行 执行到结束的瞬间时，vue会删除 fade-enter-active,fade-enter-to 下面用一个栗子解释一下，html按上面的那个写，js是下面这个 var vm = new Vue ( { el : '#root' , data : { show : true } ,

动画抖动：去掉 can Transition To Self 立马动画跳转：去掉 Has Exit time 动画的平滑过度的原理： Mathf.lerp 插值 两个帧 之间 有变化的骨骼的 旋转位移。 两个动画之间的混合值，两个值混合的越多动画效果也会更加的平滑契合。 Blend Tree : 相同的身体部位，不同方向上的融合。 动画镜像 1D Blend Tree :只能相邻的动画之间的融合 2D Blend Tree：任意两个或者多个动画片段都可以融合 AnimationLayer：不同身体的部位的融合 Weight 权重 bodMask：遮盖 身体的某些部位 没有时间限制 Apply Root Motion Handled by Script Update Mode 代码里： void OnAnimationMove()回调函数 让脚本控制物体的位移 上面代码 人物控制器的Move方法（animator的动画片段的方向位移） =动画片段的旋转 Multiplier:控制动画的速度 来源： https://www.cnblogs.com/-831/p/12274746.html

jQuery操作样式 css操作 功能：设置或者修改样式，操作的是style属性。 操作单个样式 //name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色 设置多个样式 //参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" }); 获取样式 //name:需要获取的样式名称 css(name); //案例 $("div").css("background-color"); 注意：获取样式操作只会返回第一个元素对应的样式值。 隐式迭代： 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。 class操作 添加样式类 //name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”); 移除样式类 //name:需要移除的样式类名 removeClass(“name”); //例子

2D动画的两个属性： transform：针对一个元素只能用一次不能一次写给多个元素。 transition all 2s 过度效果，写在过度之前的样式里，不能写在hover里 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < style type = "text/css" > div { width : 100 px ; height : 100 px ; background - color : red ; margin - left : 20 px ; text - align : center ; line - height : 100 px ; transition : all 3 s ; } . div1 : hover { transform : rotateZ ( 180 deg ) scale ( 2 , 2 ) ; } < / style > < / head > < body > < ! -- 1 旋转 -- 度 deg > -- > < div class = "div1" > 文字 < / div > < ! -- 2 位移 -- 像素 px > -- > < div class = "div2" style =

灵感来源是Unity的Mecanim动画状态机，不过其动画过渡条件只能是简单的变量对比。 所以还有一个灵感来源就是UE4的动画状态机（bilibili up主 谌嘉诚 的从零开始绝地求生单机版教程），其过渡线是使用蓝图实现的多条件过滤。 当然，代码结构的来源是 https://www.jianshu.com/p/55e29a21679a ，其提出了基于有向图的状态机（不确定其是否为第一个提出的，只是我第一个看到的），但是未给出具体实现。 最终，基于以上基石，有了我这个demo： 1. 基于Java 2. 基于事件的状态切换 代码： https://github.com/erikaemma/StateMachine 来源： CSDN 作者： plgkm6 链接： https://blog.csdn.net/plgkm6/article/details/104069606

1.Animista **网站地址:** animista.net/ **网站描述:**在线生成 css 动画 Animista 是一个在线动画生成器，同时也是一个动画库，它为我们提供了以下功能 1. 选择不同的动画 我们可以选择想要的动画类型（例如 entrance/exist ），除了可以选择某个动画（例如， scale-in ）外，甚至还可以为该动画选择不同的展示效果（例如： scale-in-right ）。 2. 定制 Animista 还提供了一个功能，允许我们定制动画的某些部分，比如 duration delay direction 更好的是，可以选择要设置动画的对象: 3. 生成CSS代码 选择适合自己需要的动画后，我们可以直接从网站上获取代码，甚者可以进行压缩： 4. 下载代码 另一个好用的功能是，可以把自己收藏自己喜欢的动画，然后一起下载下来， 或者，我们也可以选择将这些动画的代码复制到一起。 2. Animate CSS **网站地址:** daneden.github.io/animate.css **网站描述:**齐全的CSS3动画库 想必这个不用介绍，大部分人都知道了。 Animate CSS 可能是最著名的动画库之一。这里简要介绍一下它的用法： 1. 用法 首先，必须在总需要动画元素上添加类 animated ，然后是动画的名字。 <div class

自定义动画： 又叫关键帧动画：其中制作和绑定缺一不可 备注： 衣服可以制作和多件 同时一件衣服也可以给很多人穿（也就是说可以绑定给很多个元素） animation属性是一个简写，用于设置六个动画属性 animation-name：动画名称（必填） animation-duration：动画执行时间 animation-timing-function：动画执行的速度曲线（linear匀速、ease默认底速开始然后加速，结束时候变慢ease-in底速开始、ease-out底速结束、ease-in-out底速开始，底速结束、cubic-bezier(n,n,n,n)贝塞尔曲线） animation-delay:动画开始之前的延迟可选默认0s animation-iteration-count动画执行的次数默认1次 infinite无限次 animation-direction：规定是否方向轮流播放（至少为2）默认不反向，alternate反向 制作动画 @keyframes 声明自定义动画的关键字 后面写自定义动画的名称 空格间隔 @keyframes myAnimationTwo { /*from{} 开始点 相当于百分之零*/ /*to{} 结束点 相当于百分之百*/ 0% { } 25% { transform : translateY ( 400px ) ; } 50% {

窗口监听 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/ui/window/wx.onWindowResize.html 监控窗口的大小时候发生了变化 < view > < button bindtap = " window " > 窗口监听操作 </ button > </ view > /** * 窗口大小改变监听事件 */ window : function ( ) { wx . onWindowResize ( ( result ) => { console . log ( res ) } ) } , 动态设置导航栏 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.showNavigationBarLoading.html < view > < button bindtap = " navigationBar " > 动态设置导航栏 </ button > </ view > /** * 设置动态导航栏 */ /** * 设置动态导航栏 */ navigationBar : function ( ) { // 设置导航栏的颜色 wx . setNavigationBarColor ( {

css3动画 @keyframes 动画名 { 0% { } 100% { } } 元素执行动画 animation: 动画名 运动时间 运动曲线 无缝滚动 见案例 02无缝滚动.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style: none; } img { display: block; } section { width: 378px; height: 86px; margin: 100px auto; overflow: hidden; } section ul { width: 1000%; animation: moving 5s linear infinite; } ul li { float: left; } /*定义动画*/ @keyframes moving { from { transform: translateX(0); } to { transform: translateX(-882px); } } section:hover ul { /* 鼠标放到section时候让ul的动画暂停*