动效

作者：HelloGitHub- 小鱼干 不知道各位前端 & 移动端同学拿到 UI 同学给你的动效图，心里是什么想法。小鱼干曾混迹某个国内技术论坛，里面的大佬们对动效有惊人的一致评论： 砍死设计师系列 ， 花里胡哨系列 ， 有时间再做 ， 一点都不实用 …统一下，大部分的开发对动效的感觉是没啥卵用徒增工作量的 Task，不过也有部分开发小伙伴觉得 App / Web 大多数时候并不是都注重的是功能，功能都能实现的情况下，想要博得用户，UI（动效） 也很重要。 那么有什么方法让产品锦上添花又不会增加过多的开发量呢？答案很简单：就是开源的动效库，这里小鱼干推荐几款 BlingBling 的动效库，如果你有别的好收藏记得在评论区或者 HelloGitHub issue 区交流下心得哟~ 1. 3D 动态墙：Slideshow Slideshow 是一个采用 SceneKit 写的 3D 动态图片墙，虽然效果很酷炫但是性能便不是很好，如果你要是使用该动效建议优化下。 GitHub 地址： https://github.com/folio-sec/Slideshow 2. 定制动画：DDAnimatedSwitch DDAnimatedSwitch 是一个可定制的开关动画。它支持你使用任何帧动画来当 icon，你不仅可以为开关设置动画，还可以为拇指设置动画，可播放、调整比例大小、循环播放

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： <transition name="slide-left" mode="out-in"> <router-view /> </transition> 过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换。 v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active ：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to : 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 v-leave-to : 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave

1、H5它包括了HTML5 的标记规范，运用到了例如 CSS、JS(JavaScript)等多种计算机语言，可以实现多种动效和视听效果，会利用到后端和前端的多种功能，主要在移动端传播。H5就是移动端网页。2、HTML5规范要求所有的用户自定义属性以"data-"开头 来源： https://www.cnblogs.com/gushixianqiancheng/p/10963950.html

背景 由于我最近在开发一个互动小游戏，碰到一个情况必须要用 img 标签来实现，平时我都是用 div 再给它背景的方式实现的。（为什么小游戏还要用 dom ？用游戏引擎不行吗？我太菜了，不会游戏引擎，只能用原生js和jQuery实现了，反正我接触到的游戏都不是很复杂，用css实现一些动效还挺简单的）。 遇到的问题 其实我一开始就是用 img 来添加物品到场景中的，后来测试发现图片会被选中，并且某些浏览器甚至会打开新页面，当时我为了避开这个问题，改成了 div +背景的方式，现在我遇到了麻烦，只能用 img 才能简单点。所以我就上网找如何解决这样的问题。 最粗暴的解决方法 // jquery $ ( document . body ) . on ( 'mousedown' , e => { e . preventDefault ( ) } ) 同时，这个也是最简单的解决办法，可以禁止所有的图片、文字选中和元素的拖动，对于我制作的小游戏都十分友好。如果需要更加精细的控制，可以修改 document.body 为其他的选择器即可。 利用css禁止文字、图片选中 如果只是想禁止选中效果，而保留拖拽等其他效果，也是可以的。只需添加一些 css 代码即可。 /* 禁止所有的img被选中, 文本也是一样 */ img { user-select : none ; } 禁止图片被拖拽

Tween.js：一个JS库，其效果是可以让元素平滑地执行简单的动画效果 使用方式： <script src = "tween.js" > < /script> 在文件中引入tween.js文件 具体方法： Linear ：线性 (匀速) Quad: 二次方缓动效果 Cubic: 三次方缓动效果 Quart：四次方缓动效果 Quint：五次方缓动效果 Sine：正弦缓动效果 Expo：指数缓动效果 Circ：圆形缓动效果 Elastic：指数衰减正弦曲线缓动函数 Back：超过范围的三次方的缓动函数 Bounce：指数衰减的反弹曲线缓动函数 以上每种方式都有三种不影响总时间和总路程的缓动效果： easeIn：逐渐加速 easeOut：逐渐减速 easeInOut：先加速后减速 使用参数： t：动画已经执行时间 b：初始的位置 c：变化的数值 d：总时间 使用实例： 元素使用tween来获得简单的缓动效果： var t = 0 ; var b = 0 ; var c = 100 ; var d = 200 ; var box = document . getElementsByClassName ( "box" ) [ 0 ] ; var time = setInterval ( function ( ) { t ++ ; if ( t >= d ) { clearInterval

本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和transform的运用——实现卡片翻转 话不多说，请看。 扇形DIV的使用——实现雷达扫描图 在一些杀毒或文件扫描类的软件上，我们可能会看到一些雷达扫描的UI样式，例如下图所示 如果我们要通过CSS该如何去实现话，我们的想法一般是先画个扇形，然后给它加上渐变。 实现渐变的方式很简单，但我们该如何实现一个扇形呢？ 我们可以通过一些技巧实现这一点，请看： 没错，我们可以通过skew函数，将黄色的div倾斜，然后溢出部分通过overflow:hidden遮住就可以了。 锐角扇形：deg<0，向右边倾斜，即可得到锐角扇形 钝角扇形：deg>0, 向左边倾斜，即可得到钝角扇形 代码如下 // CSS代码 @keyframes rotateAnimate { from { transform : rotate(0deg) skew(-30deg) } to { transform : rotate(360deg) skew(-30deg) } } .fan-wrapper { overflow : hidden ; position : relative ; margin : 100px ; width

第01课·UI动效概述 课时1 - 关于UI动效的介绍及行业概述 课时2 - 动效设计在工作领域的应用 课时3 - 动效设计如何学习 第02课·AE软件基本操作 课时1 - 界面介绍及合成设置 课时2 - 合成的创建 课时3 - 文件的导入 课时4 - 基础图层简介 课时5 - 形状图层的基本操作 课时6 - 图层样式的添加 课时7 - 基本动画的添加 课时8 - 缓动曲线的调节 第03课·基础动效案例实操 课时1 - “机票订票应用”动效案例（1） 课时2 - “机票订票应用”动效案例（2） 课时3 - “机票订票应用”动效案例（3） 第04课·特殊属性动画的制作 课时1 - 路径工具的基本操作 课时2 - 利用路径工具制作动画小案例 课时3 - 运动缩放及运动模糊的添加 课时4 - 运动变形的制作 课时5 - 蒙板的使用 课时6 - 摆动变换的使用 课时7 - 运用摆动变换制作粒子效果 课时8 - 形状图层中的布尔运算 课时9 - 中继器的使用 第05课·形状动画整合案例操作 课时1 - “小蜜蜂”案例实操（1） 课时2 - “小蜜蜂”案例实操（2） 课时3 - “小蜜蜂”案例实操（3） 课时4 - “小蜜蜂”案例实操（4） 第06课·AE特效在动效中的应用 课时1 - 扭曲效果的使用 课时2 - 破碎效果的制作 课时3 - 卷纸效果的添加 来源： CSDN 作者： di

理解： transition 过渡 连续的、从a到b transform 变换 旋转、缩放、偏移 animation 动画 一、transition 1.理解 　　过渡，用于平滑的改变CSS值，举个例子： change{ 　　width:100px; 　　height:100px; 　　background:yellow; 　　transition:background 10s; } change:hover{ 　　background:red; } 　　意思就是说先在change这个css样式里面“声明”：如果我的background属性发生了变化，那么它的变化过程是连续变化（渐变），这个变化过程持续10s。 　　所以，transition 就是用来定义，当一个变化发生时，它变化的连续性和时间，以及连续过程的快慢情况的（先慢后快、先快后慢等）。 　　 transition不控制变化的产生，而是只控制变化发生后的过渡效果。 2.使用 　　transition属性是下面几个属性的缩写: transition-property指定哪个属性应用过渡，比如 transition-property:background 就是指定 background 属性应用过渡。 transition-duration指定这个过渡的持续时间 transition-delay过渡延迟多长时间开始

聊聊Web App、Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按：这3类主流应用你都了解吗？设计师除了要有视觉功夫，对不同形式的APP也应当了然于胸，今天百度的同学写了一篇非常全面的总结，帮你迅速搞定3类主流APP的设计方法，附带一大波避雷针，带你巧妙跳过APP设计的雷区，涨姿势是分分钟刻不容缓的事咯！ 目前主流应用程序大体分为三类：Web App、Hybrid App、 Native App。 一、Web App、Hybrid App、Native App 纵向对比 首先，我们来看看什么是 Web App、Hybrid App、 Native App。 1. Web APP Web App 指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。 优点 （1）开发成本低， （2）更新快， （3）更新无需通知用户，不需要手动升级， （4）能够跨多个平台和终端。 缺点： （1）临时性的入口 （2）无法获取系统级别的通知，提醒，动效等等 （3）用户留存率低 （4）设计受限制诸多 （5）体验较差 2. Hybrid App Hybrid APP指的是半原生半Web的混合类App。需要下载安装

1、transform:translate(-50%,-50%)实现水平垂直居中 translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。 示例： 2、css3 @keyframes 规则 学习链接：https://www.runoob.com/cssref/css3-pr-animation-keyframes.html 笔记 3、CSS3 animation（动画） 属性 学习链接： CSS3 animation（动画） 属性 笔记 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state; 4、发现关于display:inline-block的一个有趣现象：