& HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）-HTML5教程
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）-HTML5教程
围观741次 暂无 编辑日期：
点评：这篇文章主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下效果图：方法一：代码如下:&!DOCTYPE HTML&
&canvas id="myCanvas" width="500" height="500"&your browser does not support the canvas tag&/canvas&
&script type="text/javascript"&
var deg = 0;
var r = 30;
var rl = 100;
function drawTaiji() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var colorA = "rgb(0, 0, 0)";
var colorB = "red";
var px =Math.sin(deg)*r;
var py =Math.cos(deg)*r;
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
deg +=0.1;
setInterval(drawTaiji, 100);
&/script& &/p&&p&&/body&
&/html& 方法二：代码如下:
&!DOCTYPE HTML&
&canvas id="myCanvas" width="500" height="500" &your browser does not support the canvas tag &/canvas&
&script type="text/javascript"&
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var angle = 0;
var count = 360;
var clrA = '#000';
var clrB = 'red';
function taiji(x, y, radius, angle, wise) {
angleangle = angle || 0;
wisewise = wise ? 1 : -1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = clrA;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(0, 0, radius, 0, Math.PI, false);
ctx.fill();
ctx.fillStyle = clrB;
ctx.beginPath();
ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
loop = setInterval(function () {
beginTag =
ctx.clearRect(0, 0, canvas.width, canvas.height);
taiji(200, 200, 50, Math.PI * (angle / count) * 2, true);
//taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
angle = (angle + 5) %
&/script& &/p&&p&&/body&
分享本文至：
转载请注明：日于发表
本&文&链&接：
您可能还会对这些文章感兴趣！
本站文章部分来源于网络收集整理，如有侵权请联系站长删除！邮箱:- 【9秒社团】-中国最大的移动开源技术社区
后使用快捷导航没有帐号？
| 联系方式
COPYRIGHT(C)2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备号-4
北京中清龙图网络技术有限公司CSS3制作的酷炫的齿轮旋转的动画效果代码_HTML5 CSS3-站长素材网
您所在的位置： >
CSS3制作的酷炫的齿轮旋转的动画效果代码
CSS3制作的酷炫的齿轮旋转的动画效果代码
上传用户：游客投稿　来源：网络　日期： 11:37:37 人气：
您可能还会喜欢
本站资源均为免费自由下载，部分内容收集于互联网，版权归原作者所有，仅供学习交流用！如果有侵权内容、不妥之处，请联系我们删除。敬请谅解!首页HTML5图片阴影翻转3D动画效果
HTML5图片阴影翻转3D动画效果
软件类别：
运行环境： HTMl5
更新时间：
演示地址：
下载地址：
浏览次数： 4650
之前分享过一款 。今天我们要分享一款很酷的 3D动画特效，这款3D特效可以为你的图片增加阴影的效果，而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。更多。
本文固定链接:
下载地址：&&提取码：sh6s）
提示：使用解压后再运行或安装,&&&&压缩包密码www.codejie.net,&&&&& 下载失败请邮件反馈。
您还感兴趣的文章
微信公众号
Copyright & 源码街 - Codejie.Net 渝ICP备号-2HTML 5 动态效果制作方法整理 - 简书
HTML 5 动态效果制作方法整理
请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
随着时代的发展和进步，越来越多的开发者开始在前端界面中加入动态效果。
那么我们今天就一起来整理和分享一下前端动态效果的制作方法，并对其中的 Canvas 进行一下简单的讲解。
2.动态效果的分类
我们首先先来简单看一下，动态效果的制作有哪些分类？
首先第一个就是我们的 gif 图片，这是一种非常简单，但却高效的动态图制作方式。
GIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。
GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。
H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。
4.逐帧动画
有很多朋友读到这里，可能会觉得，逐帧动画跟 GIF 不应该是一样的么？
逐帧动画即是利用一张等间距的动画分解逐帧图片，一般是由js脚本模拟编写。
逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”，之后我们就可以通过修改 background-position 来完成一个“逐帧动画”。
当然我们也可以通过设置特殊的图片，来完成一些特殊的效果。
5.CSS3 动画
CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。
关于动画的应用和基础属性介绍在之前也已经介绍过了，如果小伙伴们忘记了，可以点击下面的链接去从新温习一下。
这里说个题外话，如何高质高效把动画设计传达给工程师呢？
Tips：建议使用"案例Demo或者分镜头脚本+动画属性分解表+素材切图"的套装！
以下图为例：这是一个点击反馈的小动画，在无法提供Demo的时候，我们可以使用"动画属性分解表"的方式。
动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写，会比凭空的和工程师进行交流传达，来的更精准一些。
SVG，也是动效制作中不可忽略的一大热门方法，我们定义它为擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。
看下图几个例子，涉及到这种沿着元素描边的动画，一般都是出自SVG之手啦，当然，它也可以实现一些复杂的动画，类似这个表情图片，不过实现成本是不太划算的。
知识普及：SVG，可缩放矢量图形（Scalable Vector Graphics）**， 是被存成了 XML 格式的图像，它有一些特别的地方：
可被多种工具读取和修改（比如记事本）
尺寸更小，可压缩性更强
纯粹的 XML
一张SVG图，其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。
这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师同学哦。
如果大家有兴趣继续深入了解，可以点击下面的链接，这是我之前写的小教程，教大家如何通过 SVG 画出一只小狐狸。
HTML5 的新元素 &canvas&，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。
我们定义它为**擅长于绘画的动画。
如下图，绘制这样一个大量元素下落的动画效果，就是Canvas所擅长的。
Canvas可以算是SVG的堂兄弟，大部分的图表动画，都是由Canvas或是SVG制作而成的，二者的动画能力相似但也有以下这些区别：
canvas是画框，有自己固定的高宽，svg是不依赖分辨率的矢量，可以任意放大缩小。
canvas能以.jpg的格式保存图像，svg是文本的格式保存图像
canvas绘制的图像不占DOM，而svg的每个图像都是1个DOM元素
canvas适合图像密集型的动画，而svg不适合大量使用，例如制作飘雪等
canvas完全依赖脚本绘制作，而svg可直接使用矢量转存生成。
之前我也专门写过 Canvas 的入门教程，如果大家忘记了，可以点击下面的链接，重新回顾一下。
8.Flash To Canvas
除去上面几种常见的手法，Flash转Canvas的方法也是今年特别火爆的一种形式。
既然提到曾经辉煌的Flash，那产出物必须离不开炫酷这个形容词：通过Flash cc制作复杂又精细的动画，导成Canvas文件，动画中的交互操作，依赖Create.js的脚步库完成。
因为 flash 转 Canvas 的实现成本实际上非常高，在这里也就不做更多的介绍了。
video 作为 HTML 5 的新标签，有着许多非常强大的功能。
但是与之相对应的，它也因为兼容性的问题，存在了各种制约，但是无可否认，Video 在实现动态效果的方式和成本上，是其他方式无可比拟的。
10.JavaScript
其实，只要是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。
也就是说，所有的动画特效都离不开Javascript同学的支持。
市面上有很多特别的Javascript脚本库，例如，细细运用，就可以做出非同凡响的动画效果。
这篇文章原本是想专门写 Canvas 的小效果的，结果“抄着抄着”就发现，已经写这么多了。
不过也无所谓了，大不了从新开一篇文章咯。
祝工作愉快！
本文摘自：
微信公众号：MR_LIXP
https://juejin.im/user/8fe
http://blog.csdn.net/mr_lp
众所周知，一个元素，动往往比静更吸引眼球； 一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验； 一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。 近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
Swift版本点击这里欢迎加入QQ群交流:
最新更新日期：17-11-01 About A curated list of iOS objective-C ecosystem. How to Use Simply presscommand+F+&xxx...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
上班的单位在县城东南方向一个十字路口的角上，是个独立院子，院子的两边都是马路，对面是派出所和影剧院，影剧院右边是防疫站。 正门口对着影剧院，进大门口左手边的楼房原来是个大型的招待所。
招待所废弃了，一层大门这侧的一间租给一个四川饭馆叫好再来，另一间租给一个百货批发部。 ...
我想聊聊贫穷。 因为我现在真的很贫穷。 用“入不聊生”、“七漏八淌”这些词来形容我现在的现状都比较合适。我现在的收入减去支出为负。我的口袋里最多只会装着10元钱，且那是为了防止电瓶车罢工而备的专用修车款。我经常梦见自已在成堆的衣服口袋里，苦寻侥幸被岁月遗忘的人民币。 因为贫...
ssh反向链接 tcpdump抓包并存到文件
不论我们通过什么方式赚钱，你一定要记住你赚的钱，是通过价值交换来的。
无论你现在想赚多少钱，你想赚的钱都在别人口袋里，都是现成的，只是你需要考虑，用什么跟他口袋里的东西去交换。
如果你有对方想要的东西，你就能换回来他口袋里的钱。什么是对方想要的东西呢？简单...
就昨天晚上女子北京酒店被劫，一些大咖画的图，此图来自微信朋友圈，不知哪位大神画的，你真是太有才啦，感谢你啦。此图并非本人版权，仅供做宣传自救使用。 不管出游，出行，一个人，一定要记得冷静自救，保护好自己，现在的世道太乱，妖魔当道。也恳求路人伸出援助之手。