animation_animations - CSDN
  • css3 animation动画

    2020-06-07 01:16:29
    animation <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a> @keyframes more{ from { transform: translateY(-30px); } to { transform: translateY(0px...

    animation

    <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
    
    @keyframes more{
    	from {
    		transform: translateY(-30px);
    	}
    	to {
    		transform: translateY(0px);
    	}
    }
    
    .more{
    	position: fixed;
    	bottom: 40px;
    	right: 80px;
    	z-index: 1;
    	animation: more 1.5s infinite alternate;
    }
    
    .more img{
    	width: 174px;
    	height: 61px;
    }
    

    最常用的几种属性有以下几种:

    1、animation-name(动画名称)

    animation-name属性是必须存在的,因为animation-name的值默认是none,没有动画。

    2、animation-duration(动画执行一次所需时间)

    animation-duration属性也是必须存在的,因为animation-duration的值默认是0,没有动画。

    3、animation-delay(动画在开始前的延迟时间)

    animation-delay的值可以是秒(s)或者是毫秒(ms),默认值是0,没有延迟。

    4、animation-timing-function(动画以何种运行轨迹完成一个周期)

    animation-timing-function的值是贝塞尔曲线,默认值是ease,表示动画以低速开始,然后加速,最后在结束前变慢。 最常用的值有以下几个:

    (1)linear:表示动画从头到尾的速度都是相同的。

    (2)ease-in:表示动画以低速开始。

    (3)ease-out:表示动画以低速结束。

    (4)ease-in-out:表示动画以低速开始和结束。

    如果没有想用的值,也可以直接使用三次贝塞尔函数,使用网站是http://cubic-bezier.com,可直接调试出自己想要的值;也可以在浏览器中直接调试,现在浏览器调试工具中都支持贝塞尔函数可视化调试。

    5、animation-iteration-count(动画播放次数)

    animation-iteration-count属性值有两种:

    (1)直接写数字,自定义想要播放动画的次数。

    (2)infinite:设置动画无线循环播放。

    6、animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

    默认值为none,标示,不会在动画结束或者未开始时给元素 添加样式

    常用属性值为:

    (1)forwards:表示动画结束后,元素直接接使用当前样式。

    (2)backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值(当animation-direction为reverse或者alternate-reverse时)

    7、animation-direction(是否轮流反向播放动画)

    默认值是normal,动画正常播放。如果动画只播放一次,则该属性无效。

    常用的属性值为:

    (1)reverse:表示动画反向播放。

    (2)alternate:表示动画在奇数次播放时为正向播放,为偶数次播放时为反向播放。

    (3)alternate-reverse: :表示动画在奇数次播放时为反向播放,为偶数次播放时为正向播放。

    animation属性在书写通常合并在一起,除非需要单独设置的属性值,animation属性的简写形式为:animation:code 2s 2s linear infinite alternate forwards;

    展开全文
  • animation动画

    2020-06-28 15:05:01
    1.过渡(transition) 通过过渡可以指定一个属性发生变化时的切换方式 transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡,则使用all关键字 大部分属性都支持过渡效果,注意...

    1.过渡(transition)

    通过过渡可以指定一个属性发生变化时的切换方式

    transition-property: 指定要执行过渡的属性
    多个属性间使用,隔开
    如果所有属性都需要过渡,则使用all关键字
    大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

     transition-property: height , width;  
     transition-property: all;    
    

    transition-duration: 指定过渡效果的持续时间
    时间单位:s 和 ms 1s = 1000ms

    transition-duration: 2s;
    

    transition-timing-function: 过渡的时序函数
    指定过渡的执行的方式
    可选值:

    • ease 默认值,慢速开始,先加速,再减速

    • linear 匀速运动

    • ease-in 加速运动

    • ease-out 减速运动

    • ease-in-out 先加速 后减速

    • cubic-bezier() 来指定时序函数
      https://cubic-bezier.com

    • steps() 分步执行过渡效果
      可以设置一个第二个值:
      end , 在时间结束时执行过渡(默认值)
      start , 在时间开始时执行过渡

     transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); 
     transition-timing-function: steps(2, start); 
    

    transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡

    transition-delay: 2s;
    

    transition 可以同时设置过渡相关的所有属性

    2.动画

    动画和过渡类似,都是可以实现一些动态的效果,
    不同的是过渡需要在某个属性发生变化时才会触发
    动画可以自动触发动态效果
    设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤

    @keyframes test {
                /* from表示动画的开始位置 也可以使用 0% */
                from{
                    margin-left: 0;
                    background-color: orange;
                } 
    
                /* to动画的结束位置 也可以使用100%*/
                to{
                    background-color: red;
                    margin-left: 700px;
                }
    

    animation-name: 要对当前元素生效的关键帧的名字
    animation-duration: 动画的执行时间
    animation-delay:动画的延时
    animation-timing-function

    animation-iteration-count 动画执行的次数
    可选值:
    次数 animation-iteration-count: 1;
    infinite 无限执行

    animation-direction
    指定动画运行的方向
    可选值:
    normal 默认值 从 from 向 to运行
    reverse 从 to 向 from 运行
    alternate 从 from 向 to运行 重复执行动画时反向执行
    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

    animation-play-state: 设置动画的执行状态
    可选值:
    running 默认值 动画执行
    paused 动画暂停
    animation-fill-mode: 动画的填充模式
    可选值:
    none 默认值 动画执行完毕元素回到原来位置
    forwards 动画执行完毕元素会停止在动画结束的位置
    backwards 动画延时等待时,元素就会处于开始位置
    both 结合了forwards 和 backwards

    变形

    指通过CSS来改变元素的形状或位置,不会影响到页面的布局
    transform 用来设置元素的变形效果

    • 平移
      translateX() 沿着x轴方向平移
      translateY() 沿着y轴方向平移
      translateZ() 沿着z轴方向平移
      平移元素,百分比是相对于自身计算的
    transform: translateX(100%);
    
    <div class="box3">
            aaaa
    </div>
    .box3{
                background-color: orange;
                position: absolute;
                /* 
                    这种居中方式,只适用于元素的大小确定
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto; */
    
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
    

    z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
    距离越大,元素离人越近
    z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果
    必须要设置网页的视距

    html{
                /* 设置当前网页的视距为800px,人眼距离网页的距离 */
                perspective: 800px;
            }
    
    • 旋转

    可以使元素沿着x y 或 z旋转指定的角度
    rotateX()
    rotateY()
    rotateZ()

    transform: rotateZ(.25turn); 
    transform: rotateY(180deg) translateZ(400px); 
    transform: translateZ(400px) rotateY(180deg);
    transform: rotateY(180deg);
    /* 是否显示元素的背面 */
    backface-visibility: hidden;
    
    • 变形
      对元素进行缩放的函数:
      scaleX() 水平方向缩放
      scaleY() 垂直方向缩放
      scale() 双方向的缩放
    #变形的原点 默认值 center
    transform-origin:20px 20px; 
    
    :hover{ transform:scale(2) }
    
    展开全文
  • 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了几种...View Animation相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475

    1、概述

    Android提供了几种动画类型:View Animation 、Drawable Animation 、Property Animation 。View Animation相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如:你希望View有一个颜色的切换动画;你希望可以使用3D旋转动画;你希望当动画停止时,View的位置就是当前的位置;这些View Animation都无法做到。这就是Property Animation产生的原因,本篇博客详细介绍Property Animation的用法。至于Drawable Animation,嗯,略~

    2、相关API

    Property Animation故名思议就是通过动画的方式改变对象的属性了,我们首先需要了解几个属性:

    Duration动画的持续时间,默认300ms。

    Time interpolation:时间差值,乍一看不知道是什么,但是我说LinearInterpolator、AccelerateDecelerateInterpolator,大家一定知道是干嘛的了,定义动画的变化率。

    Repeat count and behavior:重复次数、以及重复模式;可以定义重复多少次;重复时从头开始,还是反向。

    Animator sets: 动画集合,你可以定义一组动画,一起执行或者顺序执行。

    Frame refresh delay:帧刷新延迟,对于你的动画,多久刷新一次帧;默认为10ms,但最终依赖系统的当前状态;基本不用管。

    相关的类

    ObjectAnimator  动画的执行类,后面详细介绍

    ValueAnimator 动画的执行类,后面详细介绍 

    AnimatorSet 用于控制一组动画的执行:线性,一起,每个动画的先后执行等。

    AnimatorInflater 用户加载属性动画的xml文件

    TypeEvaluator  类型估值,主要用于设置动画操作属性的值。

    TimeInterpolator 时间插值,上面已经介绍。

    总的来说,属性动画就是,动画的执行类来设置动画操作的对象的属性、持续时间,开始和结束的属性值,时间差值等,然后系统会根据设置的参数动态的变化对象的属性。

    3、ObjectAnimator实现动画

    之所以选择ObjectAnimator为第一个~~是因为,这个实现最简单~~一行代码,秒秒钟实现动画,下面看个例子:
    布局文件:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_container" >
    
        <ImageView
            android:id="@+id/id_ball"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/mv" 
            android:scaleType="centerCrop"
            android:onClick="rotateyAnimRun"
            />
    
    </RelativeLayout>

    很简单,就一张妹子图片~
    Activity代码:

    package com.example.zhy_property_animation;
    
    import android.animation.ObjectAnimator;
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    
    public class ObjectAnimActivity extends Activity
    {
    	@Override
    	protected void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.xml_for_anim);
    	}
    
    	public void rotateyAnimRun(View view)
    	{
    		 ObjectAnimator//
    		 .ofFloat(view, "rotationX", 0.0F, 360.0F)//
    		 .setDuration(500)//
    		 .start();
    	}
    
    }
    

    效果:

    是不是一行代码就能实现简单的动画~~

    对于ObjectAnimator

    1、提供了ofInt、ofFloat、ofObject,这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。

    当对于属性值,只设置一个的时候,会认为当然对象该属性的值为开始(getPropName反射获取),然后设置的值为终点。如果设置两个,则一个为开始、一个为结束~~~

    动画更新的过程中,会不断调用setPropName更新元素的属性,所有使用ObjectAnimator更新某个属性,必须得有getter(设置一个属性值的时候)和setter方法~

    2、如果你操作对象的该属性方法里面,比如上例的setRotationX如果内部没有调用view的重绘,则你需要自己按照下面方式手动调用。

    anim.addUpdateListener(new AnimatorUpdateListener()
    		{
    			@Override
    			public void onAnimationUpdate(ValueAnimator animation)
    			{
    //				view.postInvalidate();
    //				view.invalidate();
    			}
    		});
    3、看了上面的例子,因为设置的操作的属性只有一个,那么如果我希望一个动画能够让View既可以缩小、又能够淡出(3个属性scaleX,scaleY,alpha),只使用ObjectAnimator咋弄?

    想法是不是很不错,可能会说使用AnimatorSet啊,这一看就是一堆动画塞一起执行,但是我偏偏要用一个ObjectAnimator实例实现呢~下面看代码:

    	public void rotateyAnimRun(final View view)
    	{
    		ObjectAnimator anim = ObjectAnimator//
    				.ofFloat(view, "zhy", 1.0F,  0.0F)//
    				.setDuration(500);//
    		anim.start();
    		anim.addUpdateListener(new AnimatorUpdateListener()
    		{
    			@Override
    			public void onAnimationUpdate(ValueAnimator animation)
    			{
    				float cVal = (Float) animation.getAnimatedValue();
    				view.setAlpha(cVal);
    				view.setScaleX(cVal);
    				view.setScaleY(cVal);
    			}
    		});
    	}

    把设置属性的那个字符串,随便写一个该对象没有的属性,就是不管~~咱们只需要它按照时间插值和持续时间计算的那个值,我们自己手动调用~

    效果:

    这个例子就是想说明一下,有时候换个思路不要被API所约束,利用部分API提供的功能也能实现好玩的效果~~~

    比如:你想实现抛物线的效果,水平方向100px/s,垂直方向加速度200px/s*s ,咋实现呢~~可以自己用ObjectAnimator试试~

    4、其实还有更简单的方式,实现一个动画更改多个效果:使用propertyValuesHolder

    public void propertyValuesHolder(View view)
    	{
    		PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,
    				0f, 1f);
    		PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f,
    				0, 1f);
    		PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f,
    				0, 1f);
    		ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY,pvhZ).setDuration(1000).start();
    	}


     4、ValueAnimator实现动画

    和ObjectAnimator用法很类似,简单看一下用view垂直移动的动画代码:

    public void verticalRun(View view)
    	{
    		ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
    				- mBlueBall.getHeight());
    		animator.setTarget(mBlueBall);
    		animator.setDuration(1000).start();
    	}

    给你的感觉是不是,坑爹啊,这和ValueAnimator有毛线区别~但是仔细看,你看会发现,没有设置操作的属性~~也就是说,上述代码是没有任何效果的,没有指定属性~

    这就是和ValueAnimator的区别之处:ValueAnimator并没有在属性上做操作,你可能会问这样有啥好处?我岂不是还得手动设置?

    好处:不需要操作的对象的属性一定要有getter和setter方法,你可以自己根据当前动画的计算值,来操作任何属性,记得上例的那个【我希望一个动画能够让View既可以缩小、又能够淡出(3个属性scaleX,scaleY,alpha)】吗?其实就是这么个用法~

    实例:

    布局文件:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:id="@+id/id_container"
      
        >
    
        <ImageView
            android:id="@+id/id_ball"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bol_blue" />
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal" >
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="verticalRun"
                android:text="垂直" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="paowuxian"
                android:text="抛物线" />
    
        </LinearLayout>
    
    </RelativeLayout>
    左上角一个小球,底部两个按钮~我们先看一个自由落体的代码:

    /**
    	 * 自由落体
    	 * @param view
    	 */
    	public void verticalRun( View view)
    	{
    		ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
    				- mBlueBall.getHeight());
    		animator.setTarget(mBlueBall);
    		animator.setDuration(1000).start();
    //		animator.setInterpolator(value)
    		animator.addUpdateListener(new AnimatorUpdateListener()
    		{
    			@Override
    			public void onAnimationUpdate(ValueAnimator animation)
    			{
    				mBlueBall.setTranslationY((Float) animation.getAnimatedValue());
    			}
    		});
    	}

    与ObjectAnimator不同的就是我们自己设置元素属性的更新~虽然多了几行代码,但是貌似提高灵活性~

    下面再来一个例子,如果我希望小球抛物线运动【实现抛物线的效果,水平方向100px/s,垂直方向加速度200px/s*s 】,分析一下,貌似只和时间有关系,但是根据时间的变化,横向和纵向的移动速率是不同的,我们该咋实现呢?此时就要重写TypeValue的时候了,因为我们在时间变化的同时,需要返回给对象两个值,x当前位置,y当前位置:

    代码:

    /**
    	 * 抛物线
    	 * @param view
    	 */
    	public void paowuxian(View view)
    	{
    
    		ValueAnimator valueAnimator = new ValueAnimator();
    		valueAnimator.setDuration(3000);
    		valueAnimator.setObjectValues(new PointF(0, 0));
    		valueAnimator.setInterpolator(new LinearInterpolator());
    		valueAnimator.setEvaluator(new TypeEvaluator<PointF>()
    		{
    			// fraction = t / duration
    			@Override
    			public PointF evaluate(float fraction, PointF startValue,
    					PointF endValue)
    			{
    				Log.e(TAG, fraction * 3 + "");
    				// x方向200px/s ,则y方向0.5 * 10 * t
    				PointF point = new PointF();
    				point.x = 200 * fraction * 3;
    				point.y = 0.5f * 200 * (fraction * 3) * (fraction * 3);
    				return point;
    			}
    		});
    
    		valueAnimator.start();
    		valueAnimator.addUpdateListener(new AnimatorUpdateListener()
    		{
    			@Override
    			public void onAnimationUpdate(ValueAnimator animation)
    			{
    				PointF point = (PointF) animation.getAnimatedValue();
    				mBlueBall.setX(point.x);
    				mBlueBall.setY(point.y);
    
    			}
    		});
    	}
    可以看到,因为ofInt,ofFloat等无法使用,我们自定义了一个TypeValue,每次根据当前时间返回一个PointF对象,(PointF和Point的区别就是x,y的单位一个是float,一个是int;RectF,Rect也是)PointF中包含了x,y的当前位置~然后我们在监听器中获取,动态设置属性:

    效果图:


    有木有两个铁球同时落地的感觉~~对,我应该搞两个球~~ps:物理公式要是错了,就当没看见哈

    自定义TypeEvaluator传入的泛型可以根据自己的需求,自己设计个Bean。

    好了,我们已经分别讲解了ValueAnimator和ObjectAnimator实现动画;二者区别;如何利用部分API,自己更新属性实现效果;自定义TypeEvaluator实现我们的需求;但是我们并没有讲如何设计插值,其实我觉得把,这个插值默认的那一串实现类够用了~~很少,会自己去设计个超级变态的~嗯~所以:略。

    5、监听动画的事件

    对于动画,一般都是一些辅助效果,比如我要删除个元素,我可能希望是个淡出的效果,但是最终还是要删掉,并不是你透明度没有了,还占着位置,所以我们需要知道动画如何结束。

    所以我们可以添加一个动画的监听:

    public void fadeOut(View view)
    	{
    		ObjectAnimator anim = ObjectAnimator.ofFloat(mBlueBall, "alpha", 0.5f);
    		
    		anim.addListener(new AnimatorListener()
    		{
    
    			@Override
    			public void onAnimationStart(Animator animation)
    			{
    				Log.e(TAG, "onAnimationStart");
    			}
    
    			@Override
    			public void onAnimationRepeat(Animator animation)
    			{
    				// TODO Auto-generated method stub
    				Log.e(TAG, "onAnimationRepeat");
    			}
    
    			@Override
    			public void onAnimationEnd(Animator animation)
    			{
    				Log.e(TAG, "onAnimationEnd");
    				ViewGroup parent = (ViewGroup) mBlueBall.getParent();
    				if (parent != null)
    					parent.removeView(mBlueBall);
    			}
    
    			@Override
    			public void onAnimationCancel(Animator animation)
    			{
    				// TODO Auto-generated method stub
    				Log.e(TAG, "onAnimationCancel");
    			}
    		});
    		anim.start();
    	}

    这样就可以监听动画的开始、结束、被取消、重复等事件~但是有时候会觉得,我只要知道结束就行了,这么长的代码我不能接收,那你可以使用AnimatorListenerAdapter

    		anim.addListener(new AnimatorListenerAdapter()
    		{
    			@Override
    			public void onAnimationEnd(Animator animation)
    			{
    				Log.e(TAG, "onAnimationEnd");
    				ViewGroup parent = (ViewGroup) mBlueBall.getParent();
    				if (parent != null)
    					parent.removeView(mBlueBall);
    			}
    		});

    AnimatorListenerAdapter继承了AnimatorListener接口,然后空实现了所有的方法~

    效果图:


    animator还有cancel()和end()方法:cancel动画立即停止,停在当前的位置;end动画直接到最终状态。

    6、AnimatorSet的使用

    实例:

    布局文件:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:id="@+id/id_container"
       
        >
    
        <ImageView
            android:id="@+id/id_ball"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/bol_blue" />
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal" >
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="togetherRun"
                android:text="简单的多动画Together" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="playWithAfter"
                android:text="多动画按次序执行" />
            
    
        </LinearLayout>
    
    </RelativeLayout>

    继续玩球~

    代码:

    package com.example.zhy_property_animation;
    
    import android.animation.AnimatorSet;
    import android.animation.ObjectAnimator;
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.LinearInterpolator;
    import android.widget.ImageView;
    
    public class AnimatorSetActivity extends Activity
    {
    	private ImageView mBlueBall;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.anim_set);
    
    		mBlueBall = (ImageView) findViewById(R.id.id_ball);
    
    	}
    
    	public void togetherRun(View view)
    	{
    		ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
    				1.0f, 2f);
    		ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
    				1.0f, 2f);
    		AnimatorSet animSet = new AnimatorSet();
    		animSet.setDuration(2000);
    		animSet.setInterpolator(new LinearInterpolator());
    		//两个动画同时执行
    		animSet.playTogether(anim1, anim2);
    		animSet.start();
    	}
    
    	public void playWithAfter(View view)
    	{
    		float cx = mBlueBall.getX();
    
    		ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
    				1.0f, 2f);
    		ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
    				1.0f, 2f);
    		ObjectAnimator anim3 = ObjectAnimator.ofFloat(mBlueBall,
    				"x",  cx ,  0f);
    		ObjectAnimator anim4 = ObjectAnimator.ofFloat(mBlueBall,
    				"x", cx);
    		
    		/**
    		 * anim1,anim2,anim3同时执行
    		 * anim4接着执行
    		 */
    		AnimatorSet animSet = new AnimatorSet();
    		animSet.play(anim1).with(anim2);
    		animSet.play(anim2).with(anim3);
    		animSet.play(anim4).after(anim3);
    		animSet.setDuration(1000);
    		animSet.start();
    	}
    }
    

    写了两个效果:

    第一:使用playTogether两个动画同时执行,当然还有playSequentially依次执行~~

    第二:如果我们有一堆动画,如何使用代码控制顺序,比如1,2同时;3在2后面;4在1之前等~就是效果2了

    有一点注意:animSet.play().with();也是支持链式编程的,但是不要想着狂点,比如 animSet.play(anim1).with(anim2).before(anim3).before(anim5); 这样是不行的,系统不会根据你写的这一长串来决定先后的顺序,所以麻烦你按照上面例子的写法,多写几行:

    效果图:



    好了,由于篇幅~~关于属性动画还有点知识:

    1、xml文件创建属性动画

    2、布局动画

    3、View的animate方法等。

    那就考虑写到下一篇了,不过核心的功能就这些了~~

    对了,如果使用11以下的SDK ,请导入nineoldandroids动画库,用法基本完全一致~


    源码点击下载










    展开全文
  • animation

    2018-11-22 22:45:39
    和其他CSS3属性类似,animation包含很多子属性,我们一起看看: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-...

    和其他CSS3属性类似,animation包含很多子属性,我们一起看看:

    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-play-state
    • animation-fill-mode
    • @keyframes

    animation-name指定@keyframes的名字,CSS加载时会应用该名字的@keyframes规则来实现动画

    animation-duration动画持续时间,默认是0表示无动画,单位可以设s秒或ms毫秒

    animation-timing-function动画播放方式,默认值ease,可以设lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)steps。关于贝塞尔曲线和steps可以参照上一篇transition,和transition-timing-function类似,不多赘述。

    animation-delay延迟开始动画的时间,默认值是0,表示不延迟,立即播放动画。单位是s秒或ms毫秒。允许设负时间,意思是让动画动作从该时间点开始启动,之前的动画不显示。例如-2s 使动画马上开始,但前 2 秒的动画被跳过。

    animation-iteration-count动画循环播放的次数,默认值为1,即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

    animation-direction动画播放的方向,可设normalalternatealternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画,即动画会在奇数次(1,3,5…)正常播放,而在偶数次(2,4,6…)反向播放。alternate-reverse正好反过来,奇数次反向播动画,偶数次正向播动画。看效果点这里

    .myDiv1 {
        width: 75px;
        height: 75px;
        background-color: red;
        position:relative;
        animation:aDirection 5s infinite;
    } 
    @keyframes aDirection {
        from {left:0px;}
        to {left:200px;}
    }
    .alter { animation-direction:alternate; }
    .alterR { animation-direction:alternate-reverse; } 
    
    <div class="myDiv1"></div>
    <div class="myDiv1 alter"></div>
    <div class="myDiv1 alterR"></div>

    有什么用呢?其实例子页面就能看到alternate/alternate-reverse的动画效果可以平滑地实现反转效果。例如例子页面中闪烁提示的例子。你可以用text-decoration: blink来实现闪烁,但它的功能有限支持有限。用CSS3动画实现的闪烁效果更棒。(当然闪烁的使用必须克制,要定时定次数,不能无限闪。无限闪通常会让用户很生气后果很严重):

    @keyframes blink { 
        to { color: transparent }   //文字色平滑过渡到透明
    }
    .blink {
        animation: .5s blink 6; //触发动画6次,因为设了alternate,所以看上去闪烁了3次
        animation-direction: alternate;
    }
    

    animation-play-state动画的状态,可设runningpaused。默认值running表示正在播放动画,paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。

    animation-fill-mode动画的时间外属性,可设noneforwardsbackwardsboth。默认值none表示动画播完后,恢复到初始状态。forwards当动画播完后,保持@keyframes里最后一帧的属性。backwards表示开始播动画时,应用@keyframes里第一帧的属性,要看出效果,通常要设animation-delay延迟时间。both表示forwards和backforwards都应用。

    例如设置2s的延迟时间。初始为红色,第一帧动画变为绿色,最后一帧动画变为蓝色。看效果点这里

    .myDiv2 {
        width: 75px;
        height: 75px;
        background-color: red;
        position:relative;
        animation:mymove 5s 1 2s;
    }
    @keyframes mymove {
        from {left:0px; background-color:green;}
        to {left:200px; background-color: blue;}
    }
    .forwards { animation-fill-mode:forwards; }
    .bkforwards { animation-fill-mode:backwards; }
    .both { animation-fill-mode:both; } 
    
    <div class="myDiv2"></div>
    <div class="myDiv2 forwards"></div>
    <div class="myDiv2 bkforwards"></div>
    <div class="myDiv2 both"></div>
    

    图1不解释了,最正常的效果,初始为红色,动画开始成绿色,动画结束成蓝色,结束后恢复初始状态红色。图2设成forwards,和图1的区别是动画结束后不恢复初始状态,仍旧是蓝色。图3设成backwards,在动画开始前(即延迟时间段内)应用第一帧的动作,设成了绿色,动画结束后恢复原始状态。图4设成both兼具forwards和backwards的效果。

    @keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的,而在animation中用@keyframes可以细致地指定第一帧要干什么,第二帧要干什么。

    语法:@keyframes开头,后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%,to等于100%。

    @keyframes mymove {
        0%   {top:0px; left:0px; background:red;}
        25%  {top:0px; left:100px; background:blue;}
        50%  {top:100px; left:100px; background:yellow;}
        75%  {top:100px; left:0px; background:green;}
        100% {top:0px; left:0px; background:red;} 
    }
    

    为节约篇幅,各种浏览器前缀均省略,如Firefox用@-moz-keyframes,Chrome和Safari用@-webkit-keyframes,Opera用@-o-keyframes。提醒一下@keyframes只是定义了一个动画效果,但要使动画生效,必须用animate属性将动画绑定到具体某DOM元素上才行。

    你可以单独指定上面这些子属性,也可以像background等属性一样,合并在animation属性里指定。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并时要注意,因为有animation-duration和animation-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为animation-duration,第二个时间认作为animation-delay。

    分开指定可能代码清晰点,但因为页面需要适应各浏览器时,每个都要加上-ms,-moz等前缀的话代码会变的很多,合并在一起代码稍微少点。

    另外也可以同时指定多个动画效果,例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

    总结

    animation的参数不算多,但知道理论是一回事,能否写出精妙的动画效果是另一回事。除非你特有天赋,否则可以借鉴牛人们的设计。例如Dan Edenanimate.css动画库,里面设计出的贝塞尔曲线能让动画效果非常逼真。

    CSS3里三大动画相关属性transform,transition,animation基本内容就介绍完了。有些子属性如果不明白原理的话,代码给你都很难改,更别说自己写。现在看到酷炫的动画效果,可以试着看看源码,并对照着改成自己想要的效果。下一篇将介绍一些常见实用的动画效果。



    作者:张歆琳
    链接:https://www.jianshu.com/p/ed11f8c26992
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • Animation 前言 好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。 下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动...
  • Animation入门

    2015-12-07 20:24:48
    官方文档:http://developer.android.com/guide/topics/resources/animation-resource.html#View 帧动画 使用到的api是AnimationDrawable 使用步骤: 1,在res/drawable建立xml文件,用于定义要播放的...<animation-l
  • Animation

    2019-07-14 21:15:07
    基本动画中Animation类,动画在WPF中需要重点掌握;WPF提供了一更高级的模型,通过该模型可以只关注动画的定义,而不考虑它们的渲染方式,这个模型基于依赖项属性基础架构,本质上,WPF动画只不过是在一段时间间隔内...
  • Animation

    2014-07-31 16:07:25
    ...关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果,即是一种渐变
  • Animation的使用

    2016-08-28 21:38:12
    Animation(动画)有两种分类:补间动画(Tween)和帧动画(Frame) 补间动画主要有以下几种: 旋转(RotateAnimation) 平移(TranslateAnimation) 拉伸(ScaleAnimation) 透明度(AlphaAnimation) 实现的方式:...
  • 目录1. 动画① 创建② 属性③ 关键帧2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style 1. 动画 ① 创建 @keyframes // 创建动画 语法: @keyframes animationname {keyframes-...
  • wx.createAnimation(object) 看官方介绍1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 2.调用动画操作方法后要调用 step() 来表
  • 1.Animation Animation是一个抽象类,它本身和UI渲染没有任何关系,而它主要的功能是保存动画的插值和状态;其中一个比较常用的Animation类是Animation<double>。Animation对象是一个在一段时间内依次生成一...
  • FBX的使用与Animation设置是一个很有必要的技能,对于美工MM送过来的3D模型你应该懂得如何将其设置到游戏场景之中使用,不然真的羞死人的,这都不会。毕竟游戏里面许许多多的主角的动作都是一系列已经做好的3D动画,...
  • animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear、ease、ease-out等都是...
  • 动画事件(Animation Events)是一种附属于Animation Clips 的事件,它们在动画发展到一定程度时触发,从而实现一些特殊的功能。熟悉怎么添加动画事件可以省去很多不必要的麻烦,而且它确实非常简单。
  • animation参数以及用法

    2018-08-16 17:31:16
    ' animation-name '&gt;:检索或设置对象所应用的动画名称 &lt;' animation-duration '&gt;:检索或设置对象动画的持续时间 &lt;' animation-timing-function '&gt;:检索或设置对象动画的...
  • 在我们实际的开发过程中想要让animation在做每一次动画之前都停留几秒,我们应该怎么做呢? 首先笔者第一时间就看到了animation-delay属性,于是我就非常高兴的加上了!以为需求就OK了,但是我们发现,animation-...
  • animation-name: animation-duration: code: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;...
  • 创建游戏对象并添加Animation组件,然后将动画文件拖入组件。 2,代码控制动画 Play("ation 1" );,播放动画,传入参数为动画名字 Stop("ation 1") ,停止动画,传入参数为动画名字 CrossFade("ation 1", 0.5f); ,有...
  • CSS3 动画 animation属性

    2018-05-20 15:42:43
    动画@keyframes只是用来...动画与元素关联后,在整个动画过程中,元素的样式将完全由 animation属性来控制,关键帧中后面的样式,会覆盖前面的样式。CSS3动画,就是通过样式的不断变化得以实现的。CSS3动画的基本原...
1 2 3 4 5 ... 20
收藏数 187,191
精华内容 74,876
关键字:

animation