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

最新推荐文章于 2024-04-09 16:46:01 发布

QF _WEB

最新推荐文章于 2024-04-09 16:46:01 发布

阅读量1w

点赞数 3

文章标签： HTML5开发 ui设计 web前端动画

本文链接：https://blog.csdn.net/weixin_43650557/article/details/86615606

版权

在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 = &

最低0.47元/天解锁文章

QF _WEB

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
教你如何在网页上用H5实现动画效果

在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；...
复制链接

扫一扫