作者:夏至 ,欢迎转载,也请保留这份申明,谢谢
转载请保留这份申明 http://blog.csdn.net/u011418943/article/details/52083783
前言:
生活不可能事事都能顺心,特别是刚毕业的时候,既然有些事情改变不了
那就做好工作的同时,增强自己,也请努力到心疼自己。
我们知道,补间动画共有四种,即透明度(alpha)、缩放(scale)、旋转(rotate)和平移(translate),在一般的动画效果中,只要组合了这四个家伙,就能打通任督二脉,一般的效果我们都是可以处理的。
可以看下面这张图:
我们玩的就是这几个动画,所以,操作界面如下图:
一 、使用xml文件配置动画
1 scale 标签
scale是缩放的意思,即我们可以对空间进行放大和缩小,首先先来了解一下它的各个属性,代码先上:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="1.2"
android:fromYScale="1.0"
android:toYScale="1.2"
android:duration="700"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="restart"
>
</scale>
下面是对上面的一个解释:
android:fromXScale="1.0" 表示X轴开始的缩放比例, 1.0表示无变化,0.5 缩小一倍,2.0表示放大一倍
android:toXScale="1.2" 表示X轴结束的缩放比例,所以,两个结合就是X放大了1.2倍,同理,Y轴也放大1.2倍,即整个空间放大1.2倍
android:duration="700" 表示整个动画的过程持续时间,这里设置的是700ms
android:pivotX="50%" 动画起始的X轴位置,50%表示自身的中心,也是是数字,比如50,则是从距离空 间的50px开始缩放,50%p则是根据父局,一般没怎么用到
android:pivotY="50%" 动画起始的Y轴位置,与上诉一致
android:repeatCount="1" 重复次数
android:repeatMode="restart" 重复类型 ,有两个值,restart和reverse,前者表示重放,后者表示回放
一般我们在res下新建一个anim文件夹,把我们需要的动画写成xml文件就可以调用了。
ok,直接上代码,首先是布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alpha"/>
<Button
android:id="@+id/scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scale"/>
<Button
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="translate"/>
<Button
android:id="@+id/rolate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rolate"/>
<Button
android:id="@+id/set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="综合"/>
</LinearLayout>
<Button
android:id="@+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转跳跃"
android:textSize="24sp"
android:layout_marginTop="40dp"
android:layout_gravity="center"/>
</LinearLayout>
很简单,4个button控件表示四种动画,其中 set是组合动画,后面会讲,再加一下button用来演示。
接下来是MainActivity:
public class AtyAnimation extends Activity implements OnClickListener{
private Button button;
private Animation mAnimation;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.aty_animationtest);
button = (Button)findViewById(R.id.test);
findViewById(R.id.alpha).setOnClickListener(this);
findViewById(R.id.scale).setOnClickListener(this);
findViewById(R.id.translate).setOnClickListener(this);
findViewById(R.id.rolate).setOnClickListener(this);
findViewById(R.id.set).setOnClickListener(this);
}
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
switch (arg0.getId()) {
case R.id.alpha:
break;
case R.id.scale:
mAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
button.startAnimation(mAnimation);
break;
case R.id.translate:
break;
case R.id.rolate:
break;
case R.id.set:
break;
default:
break;
}
}
}
可以看到,我们是用 mAnimation = AnimationUtils.loadAnimation(this, R.anim.scale); 加载的,效果如下:
2 alpha 透明度
透明度相对比较简单,我们只需要设置它的开始和结束的透明度即可
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="700"
android:fillBefore="true"
>
</alpha>
android:fromAlpha="1.0" 1.0表示原状,0.0表示完全透明不可见
android:fillBefore="true" 表示动画结束之后保留动画开始的状态,还可以 设置成 fillEnabled="true"和fillAfter="true" ,前者与before一样,后者则保留动画后的状态
3、translate 移动
老规则,先看代码
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100"
android:fromYDelta="0"
android:toYDelta="100"
android:duration="1000"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator"
>
</translate>
发现与上面的相比,有多了一个标签, interpolator 是动画的插值器,即你可以在你的动画过程中添加一些特效,比如我这里就添加了一个Duang的特效,即在动画结束的时候,弹几下。当然还可以选择其他的:
- AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢,在中间的时候加速
- AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
- AnticipateInterpolator 开始的时候向后然后向前甩
- AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
- BounceInterpolator 动画结束的时候弹起
- CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
- DecelerateInterpolator 在动画开始的地方快然后慢
- LinearInterpolator 以常量速率改变
OvershootInterpolator 向前甩一定值后再回到原来位置
如果你闲每次都改一下代码再试麻烦,你可以添加多几个button,直接改变就行了
4 rotate 旋转
代码先贴:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="180"
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse">
</rotate>
好了,发现标签上面都学过了,相信你已经很熟练了,基本上,补间动画就这些了。
5、set 标签
上面所学的都是单个的,那怎么把它组合起来呢?这个时候我们就要用到组合标签 set 了。先看代码:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:interpolator="@android:anim/decelerate_interpolator"
>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" >
</alpha>
<rotate
android:fromDegrees="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" />
<scale
android:fromXScale="0.4"
android:fromYScale="0.4"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.2"
android:toYScale="1.2" >
</scale>
<!-- <translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="100" >
</translate> -->
</set>
可以看到,我们把前三个动画组合在一起,让它从中心的位置,由透明,慢慢旋转变大到可见。本来先加平移的,发现真难看,就去掉了。效果图就不放了,下次我研究gif图,现在在上班呢
二 、使用Java 代码写动画
在上述中,我们都是通过xml去编写动画的,现在我们来用Java写成我们的动画,这里就举我们的组合动画来做一个例子,毕竟,组合动画包含了我们所有的属性了。废话不多说,直接上代码:
case R.id.set:
//先设置set包含标签
AnimationSet mAnimationSet = new AnimationSet(true);
//注意,我们的动画都是float型的,所以,在写数字的时候,要加f
Animation alphAnima = new AlphaAnimation(0.0f, 1.0f);
Animation rotateAnim = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF,0.5f);
mAnimationSet.addAnimation(alphAnima);
mAnimationSet.addAnimation(rotateAnim);
mAnimationSet.setDuration(1000);//添加时间
mAnimationSet.setInterpolator(new DecelerateInterpolator()); //添加插值器
mAnimationSet.setFillAfter(true);
button.startAnimation(mAnimationSet);
break;
下一章我们讲解属性动画。因为补间动画都是 View 的动画,即你的动画只能针对于View,而且是只改变偏移而已,并没有改变属性。
这个等到下一张再讲好了,这个系列的最后我们将模仿一下新浪微博的弹出效果,先看看图:
这个很简单实现的,是时候表演真正的技术了。