前端通过序列帧实现动画

实现思路

将多张图片并排放到一个盒子（上图红色区域），黑色区域为红色区域的父盒子(可视区域),黑色盒子超出部分隐藏，通过定时器，定时调整红色区域的top属性移动红色区域

具体代码（vue）

1. data()中定义全局变量存放图片地址

aniImgs: []

2.将所有帧动画图片添加到定义好的数组里面

    for (let i = 0; i < 151; i++) {this.aniImgs.push(`animalImgs/文字_00${119 + i}.png`);}

3.定义dom标签

通过遍历img标签直接在src中写相对路径可能图片显示不出来

 <div class="ani-box-par"><div class="ani-box"><imgv-for="(item, inx) in aniImgs":key="inx":src="require('../../assets/' + item)"alt=""></div></div>

4. css样式

.ani-box-par {position: fixed;top: 45%;right: .8333rem;transform: translateY(-50%);width: 3.6458rem;height: 3.6458rem;overflow: hidden;.ani-box {position: absolute;top: 0px;right: 0;width: 3.6458rem;img {display:block;width: 100%;}}
}

5. js代码控制（定时器的触发次数是图片的个数）

const im = document.querySelector(".ani-box");
for (let i = 0; i < 151; i++) {setTimeout(() => {im.style.top = `-${i * 3.6458}rem`;}, (1000 * i) / 30);
}

前端通过序列帧实现动画相关推荐

从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
前端解放生产力之–动画（Adobe Effects + bodymovin + lottie）
大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了.时光荏苒,最近再次接触,简单回顾一下. 示例 ...
前端css动画_很棒的前端资源和CSS动画课程
前端css动画 This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here. 这 ...
前端实现序列帧_炫酷H5中序列图片视频化播放的高性能实现
作者:张鑫旭 1.爆款H5中的炫酷场景的技术实现每年都会迸出一些爆款H5,这些H5通常会有一些酷酷的场景变换. 例如网易Julia H5.创意很棒,传播效果很广,其技术实现就相当简单粗暴,直接一个3 ...
【HTML网页前端开发加载动画案例】
提示:如需转载请联系作者授权才可使用. 目录前言一.网页加载动画是什么? 二.案例教学 1.HTML 当我们将css基础操作先做好之后,发现网页并不能完美对应大小,那么我们可以在基础代码定义块内做 ...
前端插件 -- WOW.js动画插件
WOW.js动画插件有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
【前端】移动互联动画
目录一.CSS动画 (一)2D动画 (二)transition过渡动画 (三)animation动画 (四)3D动画二.jQuery (一)基础用法 (1)网页中的使用 (2)jQuery使用方法 ...
用前端技术实现2d动画和特效(canvas)
1. 作品展示下面是我实现的一个粒子效果,粒子在区域内随机生成并随机移动参考代码采用原生的h5 + css + js实现 2. 原理何为动画?连续的画面显示就是动画,特效也可以理解为动画. 浏 ...
前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...

前端通过序列帧实现动画

前端通过序列帧实现动画相关推荐

最新文章

热门文章