主要实现以下几种简单的动画效果(其实原理基本相同):
1.匀速动画:物体的速度固定
2.缓动动画:物体速度逐渐变慢
3.多物体动画
4.透明度动画
动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用定时器来达到让物体运动的效果。
将定时器放在一个函数内,定义物体的运动速度speed为10,判断物体的运动方向(向左走或向右走)来规定speed的正负;
然后将 物体的offsetLeft加上速度speed 赋值给物体的left样式值(要给物体设置定位);
当物体到达目标位置时清除定时器;
var box = document.querySelector('.box'); // 获取box盒子
box.addEventListener("mouseover", function() {
animate(400); // 当鼠标经过盒子时,让盒子运动到400的位置
});
var timer = null; // 声明一个变量来存储定时器
function animate(target) { // target 目标位置
clearInterval(timer); // 开启定时器前要先关闭上一个定时器,不然定时器会累加导致速度越来越快
timer = setInterval(function() {
var speed = 10; // 速度 固定值10
speed = box.offsetLeft < target ? speed : - speed; // 判断是向左走(负)还是向右走(正)
if(box.offsetLeft == target) {
clearInterval(timer); // 盒子到达目标值时清除定时器
} else {
box.style.left = box.offsetLeft + speed + 'px';
}
},25)
}
让速度等于 目标值和当前位置之差/10,二者之差会越来越小,即速度speed也会越来越小;
二者之差除以十并不总是整数,可能会导致物体位置和目标值不能完全相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整;
var box = document.querySelector('.box');
box.addEventListener("mouseover", function() {
animate(400);
});
var timer = null;
function animate(target) {
clearInterval(timer);
timer = setInterval(function() {
var speed = (target - box.offsetLeft) / 10; // 速度为目标值和当前位置之差/10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判断speed的正负,大于0向上取整,小于0向下取整
if(box.offsetLeft == target) {
clearInterval(timer);
} else {
box.style.left = box.offsetLeft + speed + 'px';
}
}, 25)
}
因为有多个物体要做动画,所以要给每个物体都要开启一个定时器,向上边那样只声明一个timer是不行的,
所以要循环遍历每个li(我是用列表写了几个小盒子),给每个li声明一个timer来存储各自的定时器,
并且要给animate函数多添加一个形参obj来区分是哪个盒子的定时器
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++) { // 循环遍历li
lis[i].timer = null; // 给每个li声明一个timer来存储定时器
lis[i].addEventListener("mouseover", function() {
animate(this, 400);
});
}
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (target - obj.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 25)
}
4.透明度动画(与匀速运动相似)
声明一个alpha变量来存储当前的透明度,speed为速度,当前透明度加速度 赋值给盒子的透明度样式。
(多个物体透明度也是和上边多物体动画一样的,给每个物体都添加一个定时器,并给animate函数多一个形参obj)
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
opacity: 0.3;
filter: alpha(opacity = 30); /* 兼容IE8及以下的IE浏览器 */
}
</style>
<script>
window.addEventListener('load', function() {
var box = document.querySelector('.box');
box.addEventListener('mouseover', function() {
animateAlpha(100); // 鼠标经过盒子 透明度变为1
})
box.addEventListener('mouseout', function() {
animateAlpha(30); // 鼠标离开透明度变为0.3
})
var alpha = 30; // 存储当前透明度 初始值为30
var timer = null;
function animateAlpha(target) {
clearInterval(timer);
timer = setInterval(function() {
var speed = 10;
speed = alpha < target ? speed : - speed; // 判断速度的正负
if(alpha == target) {
clearInterval(timer);
} else {
alpha += speed;
/* 这里有两个样式都需要改变 */
box.style.filter = 'alpha(opacity = '+ alpha +')';
box.style.opacity = alpha / 100; // opacity别忘了除以100
}
}, 25);
}
})
</script>
CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画
Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。
尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素
在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的
常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。
创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可
transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。
制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下
js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!