教你如何在网页上用H5实现动画效果

在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？

其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；在web开发中，要实现这样的gif图片，也有很多方法；在这给读者提供一个思路，就是利用html5 canvas实现动画效果。

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>canvas帧--实现动画</title><style>*{padding:0;margin:0;}canvas{display:block;background:white}
</style>
</head>
<body>
<canvas></canvas>
<script>var imgPic = new Image();imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';var canvas = document.querySelector('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;var ctx = canvas.getContext('2d');imgPic.onload = function () {drawImg()}var i = 0;var lastTime = new Date().getTime();var delatime;var timer = 0;function drawImg() {window.requestAnimationFrame(drawImg);var now = new Date().getTime();delatime = now - lastTime;lastTime = now;timer += delatime;if (timer > 200) {i++;if (i > 7) i = 0;timer = 0}console.log(delatime)ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);}
</script>
</body>
</html>

以上方法实现的前提是，需要有一张已绘制帧的图片，有了图片才可进行帧的动画；利用该方法可以控制动画的播放、暂停以及帧率

教你如何在网页上用H5实现动画效果相关推荐

在html中加动画效果,教你如何在网页上用H5实现动画效果
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢? 其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时 ...
教你如何将网页上的视频下载到手机
我们有时我们在网上看到了一个自己感兴趣的视频,想要把它下载到手机上以后慢慢再看, 此时可以利用浏览器,可以轻松地把网页视频下载到我们的手机上. 首先我们下载UC浏览器最新版本: 下载地址:http:/ ...
手把手教你如何设置H5页面动画效果
"H5",这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野.本文聚焦于基于微信传播的H5页面的动画设计,希望与大家进行交流探讨. 首先我们选择H5页面 ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
从任意网页上摘取酷炫Jquery效果为自己使用的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 用的chrome 浏览器 2. 随意百度一个漂亮的jquery效果比如我找到一个可以旋转的 ...
Android上webview界面切换动画效果
使用Android上的webview控件时需要跳转到下一个html时,要求当前界面缓缓的向左移动,下一个html界面缓缓的从右边出现.这与常规动画不同,一般方式将无法制作出动画.主要实现方法可以先保存 ...
iframe 标签(用于嵌套网页)及loading加载动画效果
一. 什么是 iframe 1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页. 2. iframe 默认有一个宽高,存在边界. 3. iframe 是一个行内块级元素,可以通过 di ...
通过JS和CSS，实现网页加载中的动画效果
需要材料: 一张loading动画的gif图片基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框页面开始发送Ajax请求数据时,显示模态框请求完成,隐藏模态框下面我们通过 ...
如何在html网页中利用css实现动画效果
animation动画 1.@keyframes 定义关键帧动画以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 1 ...

教你如何在网页上用H5实现动画效果

教你如何在网页上用H5实现动画效果相关推荐

最新文章

热门文章