- 综合排序
- 最热优先
- 最新优先
- 来自专栏WebJ2EE
【动效】：刮刮卡
300x227 in CSS pixels image.src = 'https://media.prod.mdn.mozit.cloud/attachments/2013/06/22/5397/7a3ec0cae64a95ad454ac3bc2c71c004
1.5K20发布于 2020-11-05 - 来自专栏薄荷前端
canvas中普通动效与粒子动效的实现
canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动效，本文分别采用普通动效与粒子特效实现了一个简单的时钟。 普通时钟 普通动效即利用canvas的api，实现有规则的图案、动画。 效果 该效果实现比较简单，主要分析一下刻度与指针角度偏移的实现。 offscreenCanvasCtx.stroke(); 粒子动效 canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。
2.4K50编辑于 2022-04-07 - 来自专栏小康的自留地
五、jQuery动效
}) </script> </head> <body>
li>span {
background: url("https://ae02.alicdn.com/kf/U7eebc02d0d5e4be287d88baf368f0019S.jpg height: 24px;
background: url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg function (index, ele) {
var $url = "url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg2.6K30发布于 2020-06-18 - 来自专栏薄荷前端
canvas中普通动效与粒子动效的实现普通时钟粒子动效粒子时钟总结
canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动效，本文分别采用普通动效与粒子特效实现了一个简单的时钟。 普通时钟 普通动效即利用canvas的api，实现有规则的图案、动画。 效果 ? 该效果实现比较简单，主要分析一下刻度与指针角度偏移的实现。 offscreenCanvasCtx.stroke(); 复制代码 粒子动效 canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。
2.2K20发布于 2019-04-03 - 来自专栏腾讯大讲堂的专栏
动效设计原理:从卡通动画到UI动效
尽管UI设计和卡通动效之间存在差异：卡通更侧重于娱乐，而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点，从情感和认知层面上将两者的优势相结合。 (从左到右动效依次是移入，擦除和模糊消失) 2.2 夸张 通过“夸张现实”的手法，往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。 (在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时，只保留一个icon（上图），不吸引用户注意。当有新消息来时（下图），用动效来吸引用户注意。) 包括了身体，衣服，和一些局部的动作处理，让其动效变的更加极致。 ? 4使用UI动效的注意点 在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是：卡通是一种被动介质，而用户界面是互动式的。
3.2K80发布于 2018-02-12 - 来自专栏音视频技术
动效素材极速交付： 腾讯PAG动效组件技术揭秘
但动效素材的生产流程却一直是个很大的行业痛点，主要因为在传统的工作流下，依赖研发用代码还原动效的生产方式存在巨大的瓶颈。 在传统的动效工作流中，一般是设计师先使用 AE 设计好动效，然后导出一个视频Demo，研发再来根据 Demo 拆解动效组成并通过代码还原。 视觉动效方面：PAG的SDK已经完全还原了AE整个动效的渲染系统，接入一次，设计师就可以充分利用AE动效的原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而打折扣。 而我们如果使用一个字节的标志位来跳过默存储，单个属性就可以节省7个字节的空间。这是非常可观的。 尽量聚合相似数据类型：我们在文件的每个属性组里，都会尽可能地把相似的数据重新排列，让他们聚合到一起。 无限AE动效：PAG的SDK已经完全还原了AE的整个动效渲染系统，并支持矢量和序列帧混合导出，接入一次，设计师就可以复用PAG经过5年积累的AE动效原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而对效果打折扣
2.5K10编辑于 2023-05-05 - 来自专栏音视频技术
消除动效研发成本：腾讯 PAG 动效解决方案
第三，视觉动效方面：PAG 的 SDK 已经完全还原了 AE 整个动效的渲染系统，接入一次，设计师就可以充分利用 AE 动效的原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而打折扣。 PAG 的技术挑战 挑战一：动效文件如何压缩到仅 Lottie 一半左右大小？ 一个 AE 动效文件通常是这样层层包含的树状结构，其中时间轴属性是 AE 动效的最基本单元。 AE 动效的原理就是无数的时间轴属性随着时间变化，构成了每个瞬时的画面。那这样的一个 AE 动效文件，应该如何存储起来最高效呢？这里我们定了三个核心目标：单文件交付，解码速度快，动效文件小。 而我们如果使用一个字节的标志位来跳过默存储，单个属性就可以节省 7 个字节的空间。这是非常可观的。 第二个策略是是尽量聚合相似数据类型。 第三，无限 AE 动效：PAG 的 SDK 已经完全还原了 AE 的整个动效渲染系统，并支持矢量和序列帧混合导出，接入一次，设计师就可以复用 PAG 经过 5 年积累的 AE 动效原子能力，组合出无限的视觉动效
2.3K20编辑于 2023-05-05 - 来自专栏進无尽的文章
动效实战！跟着TUBIK STUDIO学习UI动效的常见用法
动效让用户可以更快地从界面获取反馈，提供更快更有效的微交互，让关键的要素脱颖而出，通过实时、动态的方式创造引人入胜的体验。巧妙的运用动效，能给整个体验带来更多的加成。 考虑到屏幕尺寸和使用场景，在移动端上动效的作用就显得更加关键而有效了。 在我们之前的文章中曾经探讨过动效和UI设计之间的关系，以及它是如何催生高效的微交互。 移动端设备的持续普及和流行，使得动效的多样性有了明显的提升，积极的同用户共鸣。因此，动效设计应该简单、清晰、明亮，并且以用户为中心。 ? 丰富而有梯度的色彩设计赋予界面以足够的丰度，而流畅的动效则让色彩由静态变为动态，使之更加富有活力，也更加协调了。 7、计时APP概念设计：视觉化 ? APP中的动效设计则旨在体现不同元素之间的关系，并不显眼，但是一系列微小的过渡将整个界面组织到了一起。 结语 动效设计千变万化，但是动效设计始终是服务于UI的，你得时刻记住这一点。
1.9K10发布于 2018-09-12 - 来自专栏Material Design组件
关于动效的笔记
·动效强化页面的核心内容。 ·新手引导。 ·通过动效的形式告知用户当前所处的状态。 （微信-语音搜索） 品牌与情感 3.1强化品牌认知：可以与自己的品牌形象相结合，设计出符合本身品牌气质的动效方案，亦或者与自身品牌ip结合，以功能需求为基础，创造出一些有趣的动效形式，比如加载动画等 ·使用品牌ip做动效礼物或者加载状态。 ，才是真真切切让用户用的开心的动效设计。
1.1K10发布于 2020-02-13 - 来自专栏前端技术江湖
微信都在用的开源动效方案【PAG动效】
当面对复杂的动效时，我们直接加载设计师给的动效文件，通过 sdk 就能把动画渲染出来，所见即所得，再也不用反复跟设计争论还原细节以及实现的难易程度。 2.PAG动效工作流简介 整体流程 PAG 动效工作流主要包含 AE 导出插件 PAGExporter、桌面端预览工具 PAGViewer和各平台端的 PAG SDK 三部分。 SDK 加载渲染 pag 动效。 ，是非常实用的，其SDK 的能力很全面，覆盖的业务场景从常用的UI动效、H5动效，到当下热门的短视频模板、直播礼物等，可以说非常广泛。 无限AE动效：PAG的SDK已经完全还原了AE的整个动效渲染系统，并支持矢量和序列帧混合导出，接入一次，设计师就可以复用PAG经过5年积累的AE动效原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而对效果打折扣
3.6K20编辑于 2023-08-21 - 来自专栏腾讯社交用户体验设计
动效设计原理:从卡通动画到UI动效 - 腾讯ISUX
尽管UI设计和卡通动效之间存在差异：卡通更侧重于娱乐，而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点，从情感和认知层面上将两者的优势相结合。 (从左到右动效依次是移入，擦除和模糊消失) 2.2 夸张 通过“夸张现实”的手法，往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。 (在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时，只保留一个icon（上图），不吸引用户注意。当有新消息来时（下图），用动效来吸引用户注意。) 4.使用UI动效的注意点 在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是：卡通是一种被动介质，而用户界面是互动式的。 5.总结 在UI中使用动效有以下几个优点： -由于动画让用户更容易理解界面之间的关系，所以减轻了很多认知负担。 -通过消除屏幕上的跳变，让界面不让用户吃惊并费解，从而让体验更加愉快。
2.1K20发布于 2018-06-29 - 来自专栏终身学习者
用了很多动效，介绍 4个很 Nice 的 Veu 路由过渡动效！
1 – Fade Vue Router Transitions 添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。 我们可以通过更改元素的opacity 来实现此效果。 过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。 我认为实现较好过渡是将一些更基础的过渡结合在一起。 例如，让我们将幻灯片放大和缩小合并为一个过渡。
2.3K20发布于 2021-04-19 - 来自专栏我分享我快乐
jquery_02动效方法
起初，我认真的时候，你不认真，现在你认真了，我却已离你有些远了。想想当时我们一起学习一起努力的日子，是不是有种莫名的喜悦。现在大家工作了，也会遇到一些前端设计的问题或相关的事情，这时你们能第一时间来到这里，想到曾经我们在一起共同学习过、努力过、拼搏过，我依然觉得很欣慰。所以当我的朋友们真正需要我的时候，我还在这里等着你，我在这里为你们准备了前端设计基础知识的成套视频（试听版）。无论你是第一次无基础学习，还是有基础来复习复习，也或是想我了来看看我，嘻嘻。都很欢迎大家！ 衷心祝愿大家工作顺利！一切都好！ 大
976110发布于 2018-05-02 - 来自专栏各类技术文章~
Flutter 转场动效大合集
CupertinoFullscreenDialogTransition 名称显示是苹果风格的全屏对话转换动效，构造方法如下： CupertinoFullscreenDialogTransition({ FadeTransition FadeTransition 看名字就知道是一个渐现的动画效果了，示例很简单，通过一个 Animation控制透明度就可以实现对应的动效了。 child }) 复制代码 ScaleTransition 缩放动效，我们在吹吧吹吧！来吹个大大的气球！已经介绍过了，这里不再重复介绍，大家看之前的文章即可。 SizeTransition 尺寸变化动效，可以参考超人飞来！满屏的力量感动画！这一篇文章。 总结 本篇列举了 Flutter 自带的转场动效组件 Transition 系列的使用，可以作为大家平时使用时的参考手册，建议收藏，随时可以翻阅。
1.4K20发布于 2021-11-05 - 来自专栏vivo互联网技术
前端动效讲解与实战
图片2.3 动画类型角度前端动效开发，首先应该确定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。 序列帧动画)GIF实现CSS实现（animation）JS+DOM实现JS+canvas实现（2）补间动画(Tween动画\关键帧动画)CSS实现（transition、animation等）使用一些缓动函数 结论：我们看到，在7个指标中，CSS transform:translate3d() 方案将其中的4个指标做到了最低，从这点看，我们完全有理由选择这种方案来实现CSS帧动画。 三、现有方案总结3.1 纯CSS实现适合场景： 简单的展示型动画使用transition\animation属性，设置相应的关键帧状态，并且借助一些缓动函数来进行实现一些简单化的动画。 解放前端工程师的生产力,提高设计师做动效的自由度。缺点：Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出。对于交互方面支持的还不是很好，更多的是用来展示动画。
3.8K30编辑于 2022-09-26 - 来自专栏经年隔世
Ant Motion动效插件分析
Ant Motion动效插件分析 一、原理分析 特效是通过组件内部的js和css两者共同控制。 ={['right', 'left']} ease={['easeOutQuart', 'easeInOutQuart']}></QueueAnim> （2）：第二种方案可以用只封装动画效果的方法制作动效组件库 通过给要加动效的元素添加指定的class类名来展示特效。比如hover添加了指定类名(如:hv-fadeIn)的元素时执行动效。 例：
（3）：第三种方案可以制作一个纯js组件，动效样式通过用户自定义。 通过封装的方法给元素绑定特效，可以兼顾到hover和click两中交互效果，也可以只执行一次设定的动效。3.1K30发布于 2019-11-23 - 来自专栏QQ音乐技术团队的专栏
动效歌词之全新实践
那除了动效歌词之外，我们还可以做些什么呢？ 首先，我们脱离业务对架构进行更高一层的抽象，梳理出了更通用的架构方。 以上主要是介绍动效歌词技术方案的实现原理与架构介绍。 在三星Note 3（Android 5.0，4核，ARMv7）上运行起来平均只能达到7帧的效果。 2. 这一实现让libass不需要等待渲染的完成就可以进行下一帧数据的解码，有效地提高了动效的帧率 8）卡顿优化效果汇总 经历上述各项优化后，前述复杂动效在低端机Note 3上由原来的7帧达到15帧 ? 2）寻找合适的缓存比例 从K歌线上的10几个动效中，随机选取了5个，统计各个动效处理1500帧数据对2类缓存的访求并制成了表格 ?
2.9K60发布于 2019-01-12 - 来自专栏QQ音乐技术团队的专栏
动效歌词之全新实践
那除了动效歌词之外，我们还可以做些什么呢？ 首先，我们脱离业务对架构进行更高一层的抽象，梳理出了更通用的架构方。 以上主要是介绍动效歌词技术方案的实现原理与架构介绍。 在三星Note 3（Android 5.0，4核，ARMv7）上运行起来平均只能达到7帧的效果。 2. 这一实现让libass不需要等待渲染的完成就可以进行下一帧数据的解码，有效地提高了动效的帧率 8）卡顿优化效果汇总 经历上述各项优化后，前述复杂动效在低端机Note 3上由原来的7帧达到15帧 ? 2）寻找合适的缓存比例 从K歌线上的10几个动效中，随机选取了5个，统计各个动效处理1500帧数据对2类缓存的访求并制成了表格 ?
2.8K10发布于 2019-01-11 - 来自专栏dev
小视频动效揭秘
---- 一句话来说，短视频的动效生成就是将一系列连续的图象进行加工再合成。那如果对这些动起来的图片进行加工而且流畅的显示呢？这就需要使用图像处理API了。 [5f8b7f52dd44341d81bb59fa3f95b699.png] 更复杂的特效还是需要熟悉摄像头YUV图片转换到RGB图像的操作，还要再继续深入研究OpenGL和人脸识等相关的知识，这需要一段时间的学习
1.1K30发布于 2019-12-12 - 来自专栏腾讯社交用户体验设计
ProtoPie 动效原型进阶之路
By Dribbble 过去我们会使用AE（Adobe After Effects）进行动效的设计与展示，但它是不可交互的，所以查看者只能静静看着你精心设计的一系列动效，无法参与到整个行为流程中。 macOS中提供的Keynote可以实现简单的交互动效，但那相比我们目前形成习惯的诸多各式各样的动效中呢，简直不值一提。 作为一款可交互式的原型动效设计软件，相比于其他软件，ProtoPie有着自身的几个优势：支持更多触发条件，诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。 我们推出了一门课程：《ProtoPie动效原型进阶之路》，全课共12节，总课时1小时40分。 转场与自动加载 7. 播放器与变量 8.文本输入与表达式 9.照相机 10. 联动 11.范围 12.监听 通过条件判断，制作一个可切换的Switch开关。 通过自动加载，制作元素的自动展示。
1.7K20发布于 2019-08-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号