- 综合排序
- 最热优先
- 最新优先
- 来自专栏WebJ2EE
【动效】：刮刮卡
效果展示 2. 技术细节 2.1. 填充图片 CanvasRenderingContext2D.drawImage()： The CanvasRenderingContext2D.drawImage() method of the Canvas 填充文本 CanvasRenderingContext2D.fillText()： The CanvasRenderingContext2D method fillText(), part of the 绘制圆弧路径 CanvasRenderingContext2D.arc()： The CanvasRenderingContext2D.arc() method of the Canvas 2D API 合成操作 CanvasRenderingContext2D.globalCompositeOperation： The CanvasRenderingContext2D.globalCompositeOperation
1.5K20发布于 2020-11-05 - 来自专栏薄荷前端
canvas中普通动效与粒子动效的实现
canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动效，本文分别采用普通动效与粒子特效实现了一个简单的时钟。 普通时钟 普通动效即利用canvas的api，实现有规则的图案、动画。 效果 该效果实现比较简单，主要分析一下刻度与指针角度偏移的实现。 offscreenCanvasCtx.stroke(); 粒子动效 canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。 // 渲染图片，并获取该区域内像素信息 image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2, )/2,(canvas.height-image.height)/2,image.width,image.height); //获取图表像素信息 //绘制图像 }; 像素信息 图片的大小为300*
2.4K50编辑于 2022-04-07 - 来自专栏小康的自留地
五、jQuery动效
('div').hide(1000, function () { alert('隐藏动画执行完毕') }) }) $('button').eq(2) " class="left"> <img src="https://ae03.alicdn.com/kf/Ub8d7c62873d74ebda173addf<em>2</em>b82d741T.jpg" solid #000; line-height: 35px; border-bottom: none; text-indent: 2em ) // 1.3 让二级菜单展开 $sub.slideDown(1000) }) // 2. css('marginLeft', offset) }, 50) } autoPlay() // 2.
2.6K30发布于 2020-06-18 - 来自专栏薄荷前端
canvas中普通动效与粒子动效的实现普通时钟粒子动效粒子时钟总结
canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动效，本文分别采用普通动效与粒子特效实现了一个简单的时钟。 普通时钟 普通动效即利用canvas的api，实现有规则的图案、动画。 效果 ? 该效果实现比较简单，主要分析一下刻度与指针角度偏移的实现。 offscreenCanvasCtx.stroke(); 复制代码 粒子动效 canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。 )/2,(canvas.height-image.height)/2,image.width,image.height); //获取图表像素信息 //绘制图像 }; 复制代码 像素信息 图片的大小为 (canvas.height-textHeight)/2,textWidth,textHeight); } 复制代码 效果 ?
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动效的原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而打折扣。 UI 动画这里演示的 Pick 按钮是一个 PAG 的可交互动效，支持编程控制进度、文本内容。关键是整个动效文件体积非常小，仅 2 KB左右。 无限AE动效：PAG的SDK已经完全还原了AE的整个动效渲染系统，并支持矢量和序列帧混合导出，接入一次，设计师就可以复用PAG经过5年积累的AE动效原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而对效果打折扣
2.5K10编辑于 2023-05-05 - 来自专栏音视频技术
消除动效研发成本：腾讯 PAG 动效解决方案
第三，视觉动效方面：PAG 的 SDK 已经完全还原了 AE 整个动效的渲染系统，接入一次，设计师就可以充分利用 AE 动效的原子能力，组合出无限的视觉动效，不用因为代码还原成本的问题而打折扣。 UI动画 UI 动画这里演示的 Pick 按钮是一个 PAG 的可交互动效，支持编程控制进度、文本内容。整个动效文件体积非常小，仅 2KB 左右。 PAG 的技术挑战 挑战一：动效文件如何压缩到仅 Lottie 一半左右大小？ 一个 AE 动效文件通常是这样层层包含的树状结构，其中时间轴属性是 AE 动效的最基本单元。 我们会持续完善并把它打造为一个通用的 2D 绘图引擎，为行业提供 Skia 之外的另一个轻量化的选择。 第三，无限 AE 动效：PAG 的 SDK 已经完全还原了 AE 的整个动效渲染系统，并支持矢量和序列帧混合导出，接入一次，设计师就可以复用 PAG 经过 5 年积累的 AE 动效原子能力，组合出无限的视觉动效
2.3K20编辑于 2023-05-05 - 来自专栏進无尽的文章
动效实战！跟着TUBIK STUDIO学习UI动效的常见用法
动效让用户可以更快地从界面获取反馈，提供更快更有效的微交互，让关键的要素脱颖而出，通过实时、动态的方式创造引人入胜的体验。巧妙的运用动效，能给整个体验带来更多的加成。 考虑到屏幕尺寸和使用场景，在移动端上动效的作用就显得更加关键而有效了。 在我们之前的文章中曾经探讨过动效和UI设计之间的关系，以及它是如何催生高效的微交互。 移动端设备的持续普及和流行，使得动效的多样性有了明显的提升，积极的同用户共鸣。因此，动效设计应该简单、清晰、明亮，并且以用户为中心。 ? 整个概念设计在原有过渡动效的基础上，借用符合物理规则的轻微震动回弹效果来强化体验，相比之下也许不够显眼，但是让整体感觉更加自然生动。 2、社交APP概念设计：直观 ? APP中的动效设计则旨在体现不同元素之间的关系，并不显眼，但是一系列微小的过渡将整个界面组织到了一起。 结语 动效设计千变万化，但是动效设计始终是服务于UI的，你得时刻记住这一点。
1.9K10发布于 2018-09-12 - 来自专栏Material Design组件
关于动效的笔记
（微信-公众号-剩下2篇） ·移动或者替换掉相关的信息。 ·动效强化页面的核心内容。 ·新手引导。 ·通过动效的形式告知用户当前所处的状态。 ·使用品牌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 – Slide Vue Router Transitions 我们要构建的下一个过渡是幻灯片过渡。 模板如下所示。 由于我们希望进入和离开过渡同时发生，因此使用默认模式即可。 过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。 我认为实现较好过渡是将一些更基础的过渡结合在一起。 例如，让我们将幻灯片放大和缩小合并为一个过渡。
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 动画类型角度前端动效开发，首先应该确定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。 补间动画(Tween动画\关键帧动画)CSS实现（transition、animation等）使用一些缓动函数JS实现（3）SVG动画使用 XML 格式定义图形可以用AI等SVG编辑工具生成SVG图片后 三、现有方案总结3.1 纯CSS实现适合场景： 简单的展示型动画使用transition\animation属性，设置相应的关键帧状态，并且借助一些缓动函数来进行实现一些简单化的动画。 解放前端工程师的生产力,提高设计师做动效的自由度。缺点：Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出。对于交互方面支持的还不是很好，更多的是用来展示动画。 3.4 PixiJs适用场景： 交互型动画，动画小游戏PixiJS是一个2D 渲染引擎， Pixi 主要负责渲染画面。
3.8K30编辑于 2022-09-26 - 来自专栏经年隔世
Ant Motion动效插件分析
Ant Motion动效插件分析 一、原理分析 特效是通过组件内部的js和css两者共同控制。 例：<QueueAnim type={['right', 'left']} ease={['easeOutQuart', 'easeInOutQuart']}></QueueAnim> （2）：第二种方案可以用只封装动画效果的方法制作动效组件库 通过给要加动效的元素添加指定的class类名来展示特效。比如hover添加了指定类名(如:hv-fadeIn)的元素时执行动效。 例：
（3）：第三种方案可以制作一个纯js组件，动效样式通过用户自定义。 通过封装的方法给元素绑定特效，可以兼顾到hover和click两中交互效果，也可以只执行一次设定的动效。3.1K30发布于 2019-11-23 - 来自专栏QQ音乐技术团队的专栏
动效歌词之全新实践
那除了动效歌词之外，我们还可以做些什么呢？ 首先，我们脱离业务对架构进行更高一层的抽象，梳理出了更通用的架构方。 以上主要是介绍动效歌词技术方案的实现原理与架构介绍。 这一实现让libass不需要等待渲染的完成就可以进行下一帧数据的解码，有效地提高了动效的帧率 8）卡顿优化效果汇总 经历上述各项优化后，前述复杂动效在低端机Note 3上由原来的7帧达到15帧 ? 2）寻找合适的缓存总大小 统计动效在一次播放的过程中查询缓存的次数M，查询后命中的次数为N，从而得到缓存命中率N/M。下图横轴表示了我们给libass设置的缓存总大小，纵轴则是2类缓存的命中率 ? 2）寻找合适的缓存比例 从K歌线上的10几个动效中，随机选取了5个，统计各个动效处理1500帧数据对2类缓存的访求并制成了表格 ?
2.9K60发布于 2019-01-12 - 来自专栏QQ音乐技术团队的专栏
动效歌词之全新实践
那除了动效歌词之外，我们还可以做些什么呢？ 首先，我们脱离业务对架构进行更高一层的抽象，梳理出了更通用的架构方。 以上主要是介绍动效歌词技术方案的实现原理与架构介绍。 这一实现让libass不需要等待渲染的完成就可以进行下一帧数据的解码，有效地提高了动效的帧率 8）卡顿优化效果汇总 经历上述各项优化后，前述复杂动效在低端机Note 3上由原来的7帧达到15帧 ? 2）寻找合适的缓存总大小 统计动效在一次播放的过程中查询缓存的次数M，查询后命中的次数为N，从而得到缓存命中率N/M。下图横轴表示了我们给libass设置的缓存总大小，纵轴则是2类缓存的命中率 ? 2）寻找合适的缓存比例 从K歌线上的10几个动效中，随机选取了5个，统计各个动效处理1500帧数据对2类缓存的访求并制成了表格 ?
2.8K10发布于 2019-01-11 - 来自专栏dev
小视频动效揭秘
---- 一句话来说，短视频的动效生成就是将一系列连续的图象进行加工再合成。那如果对这些动起来的图片进行加工而且流畅的显示呢？这就需要使用图像处理API了。
1.1K30发布于 2019-12-12 - 来自专栏腾讯社交用户体验设计
ProtoPie 动效原型进阶之路
By Dribbble 过去我们会使用AE（Adobe After Effects）进行动效的设计与展示，但它是不可交互的，所以查看者只能静静看着你精心设计的一系列动效，无法参与到整个行为流程中。 macOS中提供的Keynote可以实现简单的交互动效，但那相比我们目前形成习惯的诸多各式各样的动效中呢，简直不值一提。 作为一款可交互式的原型动效设计软件，相比于其他软件，ProtoPie有着自身的几个优势：支持更多触发条件，诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。 我们推出了一门课程：《ProtoPie动效原型进阶之路》，全课共12节，总课时1小时40分。 界面与基本操作 2.与Sketch协作 3.滚页与滑页 4.对象坐标与热区范围 通过上面4节入门课程，你已经掌握了ProtoPie的基本操作、与Sketch协作时一些注意事项、可以动手创建滚动区域或滑动等简单的交互动效
1.7K20发布于 2019-08-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号