使用animate.css 连续动画时有的类型动画一开始不隐藏？

来源：蜘蛛抓取(WebSpider) 时间：2017-11-19 03:44 标签： css3 animate动画效果
4被浏览247分享邀请回答view.animate()
.scaleX(100)
.setDuration(1000)
比如低版本上用官方compat api可以这样做（也可以用NineOldAndroids）：ViewCompat.animate(view)
再比如直接用ObjectAnimator实现一个缩放X方向的动画：ValueAnimator valueAnimator = ObjectAnimator.ofFloat(view,
.setDuration(1000);
valueAnimator.setRepeatMode(ObjectAnimator.RESTART);
valueAnimator.setRepeatCount(ObjectAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.start();
还有AnimatorSet等，很多有趣的api，如果掌握的不是很好可以找专门讲动画的文章看看。另外如果觉得这样还不是很方便的话，可以基于这些API封装一个效果库出来，我觉得Android上做这种基于引用的通用效果库会很麻烦，主要是让开发者方便调用，至少我现在没见过，也可能是我孤陋寡闻，如果有的话评论中告之我下----------------------------------更新----------------------------------------特别感谢
在评论中告之lottie-android库，这个项目其实我之前star过，应该说是和题主要求的类似但不完全一致，但是已经做的非常非常好了，其实因为平台的不一样我们需要思想转变下，地址如下：21 条评论分享收藏感谢收起animate.css的使用方法 - 简书
animate.css的使用方法
animate.css介绍
animate.css是一个跨浏览器的css3动画库
animate.css基础使用
引入animate.css文件
给指定的元素添加基础class animated
给指定的元素添加动画class
如果需要无限做动画, 添加 infinite 类名即可
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&link rel="stylesheet" href="./css/animate.css"&
width: 200
height: 200
background-color:
margin: 100
&div class="animated swing"&&/div&
animate.css和jQuery结合使用
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
padding: 0;
margin: 0;
width: 100
height: 100
background-color:
margin: 100
&script src="./js/jquery.js"&&/script&
&link rel="stylesheet" href="./css/animate.css"&
$(document).ready(function () {
console.log('test');
$('#test').addClass('animated infinite rollIn');
&div id="test"&&/div&
animate.css动画属性设置
编写动画属性, 覆盖animate.css库中的默认属性
编写的时候注意选择器的权重
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
padding: 0;
margin: 0;
width: 100
height: 100
background-color:
margin: 200
/*设置动画属性*/
animation-duration: 5s;
animation-delay: 1s;
animation-iteration-count: 2;
&script src="./js/jquery.js"&&/script&
&link rel="stylesheet" href="./css/animate.css"&
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated swing');
&div id="test"&&/div&
animate.css动画结束后回调
使用jQuery的one监听动画结束, 然后添加回调函数
动画结束事件 webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
padding: 0;
margin: 0;
width: 100
height: 100
background-color:
margin: 200
/*设置动画属性*/
animation-duration: 3s;
animation-delay: 5s;
animation-iteration-count: 2;
&script src="./js/jquery.js"&&/script&
&link rel="stylesheet" href="./css/animate.css"&
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated hinge');
$test.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
console.log('hello world'); // 两次动画完毕后才打印
console.log(this); // dom元素
$test.removeClass('hinge');
$test.addClass('animated rotateIn');
&div id="test"&&/div&

我要回帖

更多关于 css3 animate动画效果 的文章

 

随机推荐