- 综合排序
- 最热优先
- 最新优先
- 来自专栏小康的自留地
前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。 实现动画包括两个部分： 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点: 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。 keyframe-block-list 用于设置动画执行过程中的关键帧。 实现动画 ? 动画执行完成后回归原始状态且不需要触发条件。 normal 默认值 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始 ? alternate 动画交替反向运行，反向运动时，动画起步后退，同时，带时间功能的函数也反向。
1.2K10发布于 2020-04-09 - 来自专栏三流程序员的挣扎
Android 动画总结(5) - 属性动画
属性动画改变属性值，所以几乎可以对任何对象执行动画，而不仅仅是 View，比起补间动画，适用范围更广。 包括 ValueAnimator、ObjectAnimator 和 AnimatorSet： ValueAnimator 只是计算动画各帧的属性值，将这些属性值如何设置给相应的对象需要开发者自己实现，本身只是对值计算 <animator android:duration="200" android:valueFrom="2" android:valueTo="<em>5</em>" android:valueFrom 动画开始时的属性值 android:valueType intType/floatType(默认)，如果 value 是颜色值，属性动画内部已经处理了 color {} }) colorAnimator.addUpdateListener { it.animatedValue // 拿到值 } 对任意属性做动画 动画生效的条件： 这个属性要有对应的 setter
1.3K20发布于 2018-09-11 - 来自专栏grain先森
前端动画大乱炖
作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。 ? 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame ； CSS3：transition 和 animation； HTML5：使用HTML5提供的绘图方式（canvas、svg、webgl）； ? （normal、alternate） DEMO传送门 Canvas <canvas>是HTML5新增的元素，作为页面图形绘制的容器，可用于通过使用JavaScript中的脚本来绘制图形。
1.8K20发布于 2019-03-29 - 来自专栏clz
前端动画实现笔记
前端动画实现笔记 参加字节跳动的青训营时个人写的笔记。这部分是蒋翔老师讲的课。 动画：动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 主画师绘制关键帧，补间动画师补充关键帧。(而在前端中，补间动画师就由浏览器来当，如 keyframe 和 transition) 逐帧动画：每一帧都由主画师绘制。 (如由 steps 实现的精灵动画) 常见的前端动画技术：Sprite 动画、CSS 动画、JS 动画、SVG 动画、WebGL 动画 1. 缺点：不能动态修改或定义动画的内容，不同的动画无法实现同步，多个动画无法堆叠 使用场景：简单的 H5 活动/宣传页 相关库：animation.css、shake.css 1.7 CSS 属性 filter -- 10像素短划线，5像素空白。起点是(10, 10), 终点是(100, 10) --> 更多例子 2.2 path 这部分待后续填坑 例子 2.3 演示 不是本人写的。
2K40编辑于 2023-01-02 - 来自专栏vae
前端动画效果案例
1，CSS图片响应悬停效果 下载地址：链接：https://pan.baidu.com/s/1sxA2Xz8CcoqBiHdsnsNQpg 提取码：2hyq 2，纯scc轮播动画 下载地址：https: //pan.baidu.com/s/13mCUY5FiMZxPPoriVuARTQ 提取码：zr18 持续更新中...
2.3K20编辑于 2022-09-22 - 来自专栏云前端
前端动画实现总结
前端动画实现的几种方式 javascript直接实现 SVG（可伸缩矢量图形） CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。 三.CSS3 transition transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。 Canvas动画 canvas作为H5新增元素，是借助Web API来实现动画的。 <! 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.7K10发布于 2020-06-16 - 来自专栏TagBug
前端动画实现 - 笔记
动画的基本原理：什么是动画、动画的历史、计算机动画原理 前端动画的分类：CSS 动画、SVG 动画、JS 动画、如何选择 前端动画如何实现（主要是 JS）：JS 动画的函数封装、简单动画、复杂动画 相关实践：动画资源、工作实践、动画的优化 # 前端动画实现 - 笔记 # 动画的基本原理 # 什么是动画 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 快速、连续排列、彼此差异极小、制造错觉 # 动画的历史 如今前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类 缺点：不能动态修改或定义动画内容不同的动画无法实现同步多个动画彼此无法堆叠。 适用场景：简单的 h5 活动 / 宣传页。 推荐库：animation.css、shake.css 等。 因此，5,3,2 等同于 5,3,2,5,3,2。 stroke-dashoffset 属性指定了 dash 模式到路径开始的距离。
3.5K30编辑于 2023-03-17 - 来自专栏grain先森
前端-动画大乱炖
作者：桂圆_noble http://www.jianshu.com/p/280e0ef90b96 作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。 ? 动画即童年 动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame ； CSS3：transition 和 animation； HTML5：使用HTML5提供的绘图方式（canvas、svg、webgl）； ? f=css3_animation Canvas <canvas>是HTML5新增的元素，作为页面图形绘制的容器，可用于通过使用JavaScript中的脚本来绘制图形。
1.4K20发布于 2019-03-29 - 来自专栏Web 技术
【前端动画】实现动画的6种方式
引言 动画基本上分类两类：补间动画和帧动画。 补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。 帧动画：除了开始与结束状态，开发者还可以定义中间关键帧的状态，可以制作复杂的动画。 （❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~） Tip：为什么是16ms 上面例子中，我们设置的setInterval时间间隔是16ms。 比较 CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。 Canvas动画 canvas作为H5新增元素，是借助Web API来实现动画的。 示例 <! 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.3K10编辑于 2023-10-07 - </body> </html> 效果 经过上述操作之后，就实现了嫦娥带着玉兔奔月的动画效果 最后 上面的操作只是通过前端知识来实现一个简单的嫦娥奔月的动画效果，其实还有很大的提升空间，只是迫于篇幅有限就不再详细的完善。来自专栏三掌柜的技术空间
前端开发：使用HTML5简单实现嫦娥奔月动画
前言 在中秋佳节即将到来之际，作为程序员的一员，除了享受传统习俗：赏月、吃月饼、与家人团圆之外，更应该体现出程序员该有的风貌才行，那么本文就来通过前端知识来实现与中秋节相关的嫦娥奔月的动画效果，以此来为各位程序员同行送去不一样的节日祝福 需求 借助前端知识来实现简单的嫦娥奔月动画。嫦娥和月亮是单独分开的两个部分，然后准备好嫦娥和月亮的素材，最后通过HTML+CSS来实现最终的动画效果。 margin-left: -350px; opacity: 0; /*全透明*/ transition-duration: 3s; /*动画过渡时间 width="300" height="300"> //嫦娥
前端迪士尼动画守则上
阅读此文章前，建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈 该视频是描述迪士尼这么多年积累的动画开发经验和规则。 有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码 更多精彩，静等下一期哈！！！！！！！！！！！！！！！！！！！！！！！！！！！！
前端迪士尼动画守则上
有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 当然有关系！ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 ---- 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 当一个软性物体和地面撞击时，会有压扁和拉伸的状态，其真实的反映了现实中的物理碰撞情况，通过挤压和拉伸，极大的加强了物体碰撞时的动画效果，十分生动抢眼。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码
前端基础-jQuery动画效果
第9章 jQuery动画效果 jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。 演示动画效果 [08-演示jQuery动画（animate）.html] 9.1 三组基本动画 显示(show)与隐藏(hide)与切换(toggle)是一组动画： 滑入(slideUp)与滑出(slideDown // 1.如果不传，就没有动画效果。 ;同理 9.2 自定义动画 animate: 自定义动画 $(selector).animate({params},[speed],[easing],[callback]); // {params}：要执行动画的 （可选） 9.3 动画队列与停止动画 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
前端弹性动画与 framer-motion 动画库初探
content {:toc} 前端动画的开发一直是我所热衷探索与研究的内容，本文将描述什么是拟真的动画效果，目前所流行的 React 动画库，以及一些基于 framer-motion 动画库的 demos 动画效果的真实体验 `timing-function` 的不足 说到拟真的的动画体验，本质是动画中的过渡动画带来的体感。 通常情况开发一个前端动画，会使用 CSS transition 来实现，动画中的变量值（如 div 的位移或角度等）与时间的关系是三次贝塞尔曲线（cubic-bezier），即 `timing-function 弹簧-阻尼系统中的运动 在很多 native 动画中，特别是 iOS 的系统动画中，可以感受到“拉动越小，回弹越小；拉动越大，回弹越大”的感受，这便是弹簧动画的效果 ! [](https://gw.alicdn.com/imgextra/i1/O1CN01Z8zVrh1a5pMTrVSWe_!!
前端序列帧动画实现
原理 1.UI 提供精灵图/雪碧图（就是将序列帧排在一张图片上的图） 2.通过代码不断改变图片的位置，从而形成动画效果 代码实现 <style> .logo_gif { width: 300px; // 单个动画帧尺寸 height: 300px; cursor: pointer; background-image background-position-y: 0; animation: mouse-in 1.5s; animation-timing-function:steps(26); // 动画帧数量 animation-iteration-count:infinite // 动画循环播放 } @keyframes mouse-in{ background-position-y的值不能随便取，必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300，虽然雪碧图的大小是 400 x 10400 我们不能写成 @keyframes
前端|利用CSS制作动画效果
问题分析 需要制作出此效果，我们首先需要对css动画有一定的了解，在此基础上，我们便能利用css代码写出此效果，那么关于css动画的代码有哪些呢？下面，我就为大家介绍一些关于css动画的代码。 结语 本文介绍了如何运用css动画制作一个立体正方体，当我们阅读这篇文章后，我们还可用css动画效果制作更多更好看的图像，如果需要，可进行多次练习、摸索，也可百度找一些模板观察。
前端-10款web动画插件
今天给大家带来了十款web前端动画插件，大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。 你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。 ? 3.HTML5 Canvas模拟飞机航班线路动画 我们在网页中可以通过HTML5的Canvas画板绘制很多图形，甚至做许多动画特效，你可以在我们的HTML5 Canvas栏目中找到这些动画。 7.HTML5/CSS3超链接图片弹出动画 今天给大家分享一个基于HTML5和CSS3的超链接动画，这个HTML5应用还是比较实用的，它可以让你在鼠标滑过超链接时弹出图片，就像弹出tooltip那样的动画效果 9.HTML5 Canvas爱心表白动画特效 在很久以前，我们给大家分享过一款浪漫程序员 HTML5爱心表白动画，很多读者都表示非常震撼。
提升用户体验的前端动画
与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。 为了给用户带来更好的体验，我在这个基础上又增加了一些手势和过渡的动画效果，如下图。 下面简单的拆分一下动画细节： 页面载入，卡片向上滑入 增加 pan 的手势，卡片跟随手指滑动 随着手指滑动，增加遮罩透明度与卡片阴影变化 增加向上和向下的边界条件的处理 动画与手势的运用 这些动画利用 注意仔细观察，随着卡片的上滑，为了凸显出弹层是悬浮在底层的视觉效果，其阴影的 blur,spread,color 也跟随变重 下面再加入 pan 手势，即拖拽或平移，这里我们使用这个手势实现弹层的拖拽和相关动画 而动画只是交互体验中的一小部分。 我认为前端的本质，就是将最优质的用户体验带给用户，我也在为之不断努力，欢迎交流。
前端面试：css动画属性
面试官问你用过哪些css动画属性，能具体说说吗，现在再来回顾一下知识点： css动画属性 具体的animation属性 1.animation-timing-function属性：规定动画的速度曲线。 2.animation-iteration-count属性：定义动画的播放次数。 3.animation-play-state属性：规定动画正在运行还是暂停。 4.animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见。 例子：实现一个简单的动画效果： //引用该动画名 button{ animation: ani 5s ease 2s infinite ; } //@keyframes 定义一个动画名 @keyframes
【前端】CSS3动画详解
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 ✍CSS3 动画详解与应用 1 帧动画概述 在 CSS3 时代到来之前，网页中的动画通常通过 JavaScript 动态地改变元素的样式属性来实现 linear：动画从头到尾的速度保持一致。 ease-in：动画以缓慢的速度开始。 ease-out：动画以缓慢的速度结束。 ease-in-out：动画缓慢开始和结束，中间加速。 动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 4 常用动画库介绍 动画库链接：Animate.css 是一个方便的 CSS 动画库，提供多种现成的动画效果。 基础用法：通常结合 JavaScript 控制动画的触发条件。
