Android开发:View间渐变动画(实例)
渐变动画(也叫消失)通常指渐渐的淡出某个UI组件,同时同步地淡入另一个。当App想切换内容或View的情况下,这种动画很有用。渐变简短不易察觉,同时又提供从一个界面到下一个之间流畅的转换。如果在需要转换的时候没有使用任何动画效果,这会使得转换看上去感到生硬而仓促。在这里我详细的讲解具体实现,并附上源代码。这个实例实际上设计三个文件layout/activity_crossfade.xml...
·
渐变动画(也叫消失)通常指渐渐的淡出某个UI组件,同时同步地淡入另一个。当App想切换内容或View的情况下,这种动画很有用。渐变简短不易察觉,同时又提供从一个界面到下一个之间流畅的转换。如果在需要转换的时候没有使用任何动画效果,这会使得转换看上去感到生硬而仓促。在这里我详细的讲解具体实现,并附上源代码。
这个实例实际上设计三个文件layout/activity_crossfade.xml、menu/activity_crossfade.xml、MainActivity
现在我附上三个文件的源码,在注释中讲解功能
layout/activity_crossfade.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView style="?android:textAppearanceMedium"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"
android:padding="16dp"/>
</ScrollView>
<ProgressBar
android:id="@+id/loading_spinner"
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<!--android:textAppearanceMedium以及?android:progressBarStyleLarge均为android相关的
内置样式,具体参见android官方参考手册-->
</FrameLayout>
menu/activity_crossfade.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/animation"
android:title="@string/action_animation"
app:showAsAction="ifRoom"/>
</menu>
MainActivity.java
package com.example.power.mytest;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import java.util.zip.Inflater;
public class MainActivity extends AppCompatActivity {
private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;
/*我们先定义两个View,一个int,其中mShortAnimationDuration用于保存
* 动画的持续时间,时间我们定为android内置的值config_shortAnimTime,
* 这个属性为动画定义了一个标准的“短”持续时间。对于细微或者快速发
* 生的动画,这是个很理想的持续时段。也可以根据实际需求使用
* config_longAnimTime或config_mediumAnimTime。*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
mContentView = findViewById(R.id.content);
mLoadingView = findViewById(R.id.loading_spinner);
mContentView.setVisibility(View.GONE);
/*首先设置TextView的可见性为View.GONE,这样防止view再占
据布局的空间,而且也能在布局计算中将其忽略,加速处理过程。*/
mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime
);
crossfade();
}
private void crossfade(){
mContentView.setAlpha(0f);
mContentView.setVisibility(View.VISIBLE);
/*以上两步之后,TextView已经可见,并占据了布局空间,只是被
* 设置为透明*/
/*在mShortAnimationDuration时间内,TextView从0f变到1f*/
mContentView.animate()
.alpha(1f)
.setDuration(mShortAnimationDuration)
.setListener(null);
/*在mShortAnimationDuration时间内,ProgressBar从1f变到0f,但
* 可能因为时间较短,progressbar还未来得及看清楚就已经消失,
* 注意需要将Progressbar设置为View.GONE,以不占据布局空间*/
mLoadingView.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mLoadingView.setVisibility(View.GONE);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.activity_crossfade, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.animation:
crossfade();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
只需将上述源码黏贴与相应文件即可,查看具体效果,相关细节慢慢体会。
更多推荐
已为社区贡献4条内容
所有评论(0)