- 综合排序
- 最热优先
- 最新优先
- 来自专栏三流程序员的挣扎
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 - 来自专栏学习/读书笔记
HTML5 Canvas开发详解(5) -- 动画
，所以变量的初始化都是在动画循环之外。 从这个例子中也初步知道了Canvas动画的原理是：使用requestAnimationFrame()方法不断地清除Canvas，然后重绘图形。 5.2 物理动画 物理动画，简单来说，就是模拟现实世界的一种动画效果。在物理动画中，物体会遵循牛顿运动定律，如射击游戏中打出去的炮弹会随着重力而降落。 Canvas动画循环中注意两点： 1）对于需要不断改变的变量，一般在动画循环之前先定义； 2）对于需要不断改变的变量，一般在动画循环中图形绘制之后才递增或递减。 在实际开发的过程中，任何复杂的效果，都可以采用类似“分而治之”的方法来思考，再复杂的Canvas物理动画，我们从x轴和y轴两个方向来考虑，实现的思路就非常清晰了。
2.4K30编辑于 2022-04-07 - 来自专栏拂晓风起
【H5动画】谈谈canvas动画的闪烁问题
一般来说，在H5开发中，使用canvas往往只是为了展示一些简单的图表或者简单短小的动画，很少考虑到有闪烁的问题。 最近，在手机QQ魔法表情的项目中，就遇到了奇葩的闪烁问题。 这里说的闪烁，是指动画刚开始播放，突然出现瞬间空白（大概1帧到2帧的时间）。 闪烁分析 这个魔法表情，实际是html5版本的动画，使用Fanvas（即将腾讯开源），从swf转化为canvas 2d动画。 翻阅H5 api的资料，我们知道requestAnimationFrame在Android 4.4后才支持，而动画的机制是，如果该接口不可用，则采用setInterval取代。 ? 回到我们的动画中，发现异曲同工，闪烁、掉帧的问题根源就是因为部分机型下没有自动实现cnavas的双缓冲（一般这些都是底层实现的），而canvas每一帧动画过程又比较漫长，擦除上一帧动画后，要过几十毫秒才能绘制完成下一帧
4.2K30发布于 2018-07-03 - 来自专栏无敌清风蓝
5.osg之增加动画
1.动画沿着直线走 #include <osg/AnimationPath> #include <osg/MatrixTransform> #include <osgDB/ReadFile> #include 每个控制点都由一个时间、位置和旋转组成，这些控制点定义了动画路径。 第一行代码创建了一个控制点，该控制点在时间为0.0时，位置为(-4, 0, 0)，旋转为(1, 0, 0, 0)。 这意味着在动画的第4秒，物体将移动到位置(4, 0, 0)，并保持原来的旋转。 这两个控制点一起定义了一个从(-4, 0, 0)到(4, 0, 0)的直线路径，物体将在4秒内沿着这条路径移动 2.动画沿着圆形走 上一个例子是沿着直线走，那如果想沿着圆的轨迹走呢 那就得在动画路径中添加更多的控制点来定义这个圆形轨迹 那就把里面的tcp[(double)i] 替换为下面的 //tcp[(double)i] tcp[(double)i / 2.0] 这样每个控制点之间的时间间隔就减半了，从而使动画的速度加快了一倍
41310编辑于 2024-06-04 - 来自专栏Swift社区
SwiftUI 动画进阶 — Part 5：Canvas
前言 这个高级SwiftUI动画系列的第五部分将探索Canvas视图。 你猜怎么着，画布会不断地重绘它以保持动画效果。 ClockHandsCanvas(date: timeline.date) } } } } 通过仔细分析我们的画布，并做了些许改动，我们成功地将CPU的使用率提高到了5倍 总结 我希望这篇文章能帮助你为你的SwiftUI动画工具箱添加一个新的工具。第五部分的动画系列到此结束。至少在今年......谁知道WWDC'22会带来什么呢! 译自 Advanced SwiftUI Animations – Part 5: Canvas
3.4K10编辑于 2022-04-04 - 来自专栏拂晓风起
HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具，它们可以分为几类： 1、导出canvas动画： Flash CC(13.1)、Animation、Radi 2、导出DIV+CSS3动画： HTML5 Maker 、Edge Animation、Tumult Hype、Nodefire 3、导出SVG动画： Hippo 基本上所有工具导出的动画都会依赖一个独立的js库，这个库用于解析数据，展示动画。 这种实现方式对于小规模动画很有好处。 先来个最牛逼的html5制作的html5动画工具镇楼。 ? 由于图片太多，就懒得贴图了，有兴趣的朋友直接下载我整理的doc吧。 直接上doc： http://files.cnblogs.com/kenkofox/html5%E5%8A%A8%E7%94%BB%E5%B7%A5%E5%85%B7.zip ============= /CreateJS GSAP-JS：http://www.greensock.com/gsap-js/ CreateJS被Adobe CC用于导出html5动画，而GSAP的制作者GreenSock
3.1K30发布于 2018-07-05 - 来自专栏拂晓风起
HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。 SVG动画。 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 Flash CC在支持Canvas方面也是很强大，已经集成到IDE中，可以直接新建HTML 5 canvas动画文档，也可以从原有的Flash动画导出 canvas动画。 5、兼容性 PC浏览器实在多，直接看终端的浏览器吧， http://mobilehtml5.org/ ? ?
4.5K10发布于 2018-07-24 - 来自专栏sktj
python pyqt5 窗体动画效果
image.png -- coding: utf-8 -- """ 【简介】 不规则窗体的动画实现 """ import sys from PyQt5.QtWidgets import QApplication , QWidget from PyQt5.QtGui import QPixmap, QPainter, QCursor from PyQt5.QtCore import Qt, QTimer class self.timeChange) self.timer.start() # 显示不规则 pic def mypix(self): self.update() if self.i == 5:
2K20发布于 2019-07-28 - 来自专栏前端新视界
Vue.js 系列教程 5：动画
原文：intro-to-vue-5-animations 译者：nzbin 译者的话：经过两周的努力，终于完成了这个系列的翻译，由于时间因素及个人水平有限，并没有详细的校对，其中仍然有很多不易理解的地方 我们先讨论 CSS 过渡，然后再讨论 CSS 动画，之后介绍 JS 动画钩子以及动画的生命周期方法。过渡状态超出了本文的范围，但这是可能的。这是我为此做的一个评价不错的例子 。 动画也可以实现过渡的功能，只需要从头到尾插入状态，但是过渡无法像动画一样插入多个值。 在工具方面，两者都是有用的。过渡如同一把“锯”而动画如同“电锯”。 CSS 动画 既然已经了解了过渡（transitions）的工作原理，我们可以通过这些核心概念创建不错的 CSS 动画。 JS 动画 有很多适合我们动画的易于使用的 JS 钩子。
3.2K71发布于 2018-01-17 - 来自专栏大数据钻研
11 个 HTML5 动画工具
HTML5受到欢迎的原因也在于它给用户带来的极大便利，当前的大多数浏览器，如Chrome、Firefox、IE等都对它给予支持。 HTML5使得开发者能为你的网站创建出惊人的动画效果。 这些很棒的动画效果会为你的网站增添更多吸引力，接着会带来更多的生意。这些用HTML5创建的动画效果很出色，看起来很惊人。 但为了做出这种动画效果，你需要经历很多比较麻烦的工作，所以你可以使用一些免费或市面上收费的HTML5动画工具。 本文将会为大家介绍市面上最好的HTML5动画工具。 Mugeda Mugeda是一个基于云平台的专业可视化环境，用于直接在浏览器中制作富含动画和交互的HTML5内容。设计师无需任何编码，就可以制作富有感染力的移动动画内容。 5. HTML5 Maker 这是一款制作动画、标语和有感染力图像的最佳帮手，而且它是免费的。 6. Hippo studios 它提供了一个可以创造超强动画、复杂游戏、多媒体、App等的平台。 7.
1.8K60发布于 2018-04-18 - 来自专栏老K博客
html5怎么添加图片动画效果
html5添加图片动画效果的方法： 方法一： 利用css3 animation的steps实现spirit精灵动画； 在应用 CSS3 渐变/动画时，有个控制时间的属性 。 steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态 那么有了这个 steps() ，我们就可以实现web中常见的Sprite 精灵动画了，见demo： .bird{background: url(bird.png);width: 140px;height background-position: 0 0; } to { background-position: -800% 0px; } } 方法二： 利用html5 canvas实现gif图片； 利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo： canvas帧--实现动画 *{padding
2K10编辑于 2024-02-17 - 来自专栏互联网杂技
H5动画开发快车道
前言 以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。 经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。 它是一款为HTML5游戏开发的引擎，包含： EaselJS：用于 Sprites、动画、位图的绘制，交互体验（包含多点触控）功能。 这样我们这个叫page1的影片剪辑就包含了这一页的所有动画，想一想如果你是要做有5页游动画的h5项目，就单独把每一页的动画放到对应的影片剪辑里。这几个单独的影片剪辑就组成了一个完整的动画。 比如下面这个小的h5动画，使用上面的animate cc和createjs两天就可以搞定： 雪碧图功能 如果碰到图片很多的项目怎么办呢？
5.6K80发布于 2018-04-03 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ 1.1、set set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。 begin：动画开始时间。 dur：动画过渡时间，控制动画速度。 repeatCount：动画重复次数。 eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。 ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( svg"> <line id="line" x1="100" y1="100" x2="400" y2="300" stroke="black" stroke-width="<em>5</em>"
4.7K40发布于 2021-09-30 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ 1.1、set set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。 begin：动画开始时间。 dur：动画过渡时间，控制动画速度。 repeatCount：动画重复次数。 eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。 ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( svg"> <line id="line" x1="100" y1="100" x2="400" y2="300" stroke="black" stroke-width="<em>5</em>"
4.6K30发布于 2021-10-01 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ 1.1、set set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。 begin：动画开始时间。 dur：动画过渡时间，控制动画速度。 repeatCount：动画重复次数。 eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。 ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( svg"> <line id="line" x1="100" y1="100" x2="400" y2="300" stroke="black" stroke-width="<em>5</em>"
3.3K20编辑于 2021-11-30 - 来自专栏Dissecting Unreal
UE5的动画蓝图（Lyra工程）
UE5正式版附带的Lyra工程，展示了很多UE5里面的新的内容和新的优化，这个工程中动画的做法，就是一个非常有亮点的模块，也做了很多的优化，包括多线程优化，运行时挂载不同的动画层，CopyPose，IK 而UE5可以直接在动画蓝图里面这样做了。 因为有了UE4和UE5两个骨架的互转Retargeter文件，所以只要是任何支持UE4或UE5标准骨架的动画，都可以在这两个骨架的模型上播放，动画资源也可以互转。 因此理论上来说，在网上扒的任何动画，哪怕不是人形的，都能给UE5的标准骨架来用。 但是肯定还是支持UE4或者UE5的标准骨架动画是最方便的，因为Lyra已经建好了IK Retargeter，动画导入进来可以直接一键转换。
4.3K32编辑于 2022-05-23 - 来自专栏AlbertYang的编程之路
5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画
动画的基本使用： 1 定义动画 2 调用定义好的动画 定义动画语法 @keyframes 动画名称 { 0% { width: 100px; } 100% { width: : 持续时间; } 动画序列 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果 动画是使元素从一个样式逐渐变化为另一个样式的效果 -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05); } .loader div::before -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05); } .loader div::before -5px 5px rgba(0, 0, 0, 0.1), 0 420px 0 400px #2196f3; animation: animate 2.5s ease-in-out infinite
3K10发布于 2020-12-31 - 来自专栏防止网络攻击
基于HTML5的爱心表白动画特效
从视觉上看，它也是一个爱心轮廓，但是不同的是这个爱心轮廓由许多跳动的小爱心组成，更加有一种3D立体的效果。
3.5K20编辑于 2022-11-20 - 来自专栏向治洪
html5 jqueryrotate插件实现旋转动画
var rotation2 = function(){ $('#img5').rotate({ angle: 0, animateTo: 360 } } }); 参数 参数 类型 说明 默认值 angle 数字 旋转一个角度 0 animateTo 数字 从当前的角度旋转到多少度 0 step 函数 每个动画步骤中执行的回调函数
5.1K60发布于 2018-02-01 - 来自专栏大数据知识
最受欢迎的 5 个 React 动画库
对于 React 前端开发人员而言，从动画文本或图像到复杂的 3D 动画，在网页上实现动画是您日常工作不可或缺的一部分。动画可以在构建 React 应用程序时帮助改善整体用户体验。 在本文中，我们将比较排名前五的 5 个 React 动画库，并对每个库的流行度，开发人员经验，可读性，文档和包大小进行评估，以帮助您为下一个 React 项目选择合适的库。 大多数动画是通过将动画包装在有动画效果的 div 组件中完成的。 react-spring 为动画 React 应用程序提供了一个强大的平台。它的道具和方法是可读的，也很容易理解。 Framer Motion Framer Motion 是一个流行的 React 动画库，可轻松创建动画。它拥有简化的 API，可以抽象出动画背后的复杂性，并允许开发人员轻松创建动画。 { borderRadius: 4, backgroundColor: 'rgba(255, 255, 255, 0.7)', position: 'relative', margin: '5px
2.3K30编辑于 2021-12-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号