每次做項目寫一些小Demo的時候，為了讓程序跑的更加有趣艾杏，都會在設(shè)計的時候加上一些動畫效果韧衣，提高用戶體驗，很有意思來著购桑。
Android基礎(chǔ)動畫分為：1. Tween Animation 變換動畫 2. Frame Animation 幀動畫 3. Layout Animation 布局動畫 4. Property Animation 屬性動畫（相對復(fù)雜） 現(xiàn)在需要了解就是屬性動畫了畅铭，Demo來自于《Android編程權(quán)威指南》。
Sunset項目這個demo是模擬一個落日景象勃蜘。
Demo截圖
res/values/colors.xml
Demo截圖
res/drawable/sun.xml（在矩形視圖上顯示一個圓硕噩，模擬太陽）
Demo截圖
res/layout/fragment_sunset.xml（日落場景布局）
Demo截圖
public abstract class SingleFragmentActivity extends AppCompatActivity {
protected abstract Fragment createFragment();
@LayoutRes
protected int getLayoutRedId(){
return R.layout.activity_fragment;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutRedId());
FragmentManager fm = getSupportFragmentManager();
Fragment fragment = fm.findFragmentById(R.id.fragment_container);
if (fragment == null){
fragment = createFragment();
fm.beginTransaction().add(R.id.fragment_container, fragment).commit();
}
}
}
activity_fragment.xml
Demo截圖
public class SunsetActivity extends SingleFragmentActivity {
@Override
protected Fragment createFragment() {
return SunsetFragment.newInstance();
}
}
SunsetFragment.java
public class SunsetFragment extends Fragment {
private View mSceneView;
private View mSunView;
private View mSkyView;
private int mBlueSkyColor;
private int mSunsetSkyColor;
private int mNightSkyColor;
public static SunsetFragment newInstance() {
return new SunsetFragment();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_sunset, container, false);
mSceneView = view;
mSunView = view.findViewById(R.id.sun);
mSkyView = view.findViewById(R.id.sky);
Resources resources = getResources();
mBlueSkyColor = resources.getColor(R.color.blue_sky);
mSunsetSkyColor = resources.getColor(R.color.sunset_sky);
mNightSkyColor = resources.getColor(R.color.night_sky);
mSceneView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startAnimation();
}
});
return view;
}
private void startAnimation() {
float sunYStart = mSunView.getTop(); // 相對父視圖的頂部位置
float sunYEnd = mSkyView.getHeight(); // 此視圖的高度
ObjectAnimator heightAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYStart, sunYEnd).setDuration(3000);
heightAnimatior.setInterpolator(new AccelerateInterpolator());
ObjectAnimator sunsetSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mBlueSkyColor, mSunsetSkyColor).setDuration(3000);
sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());
ObjectAnimator nightSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mSunsetSkyColor, mBlueSkyColor).setDuration(3000);
nightSkyAnimator.setEvaluator(new ArgbEvaluator());
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(heightAnimatior).with(sunsetSkyAnimator).before(nightSkyAnimator);
animatorSet.start();
// heightAnimatior.start();
// sunsetSkyAnimator.start();
}
}
- 屬性動畫相關(guān)的類介紹：
- ObjectAnimator： 動畫的執(zhí)行類
- ValueAnimator： 動畫的執(zhí)行類
- AnimatorSet：可以放一起執(zhí)行的動畫集，設(shè)置執(zhí)行的先后順序缭贡，時間等
- AnimatorInflater： 加載屬性動畫的xml文件
- TypeEvaluator： 類型估值炉擅，主要用于設(shè)置動畫操作屬性的值，能幫助ObjectAnimator對象精確地計算開始到結(jié)束間的遞增值
- TimeInterpolator： 時間插值阳惹，用于控制動畫執(zhí)行過程
- PropertyValuesHolder： 屬性存儲器谍失，為兩個執(zhí)行類提供更新多個屬性的功能
- Keyframe：為 PropertyValuesHolder提供多個關(guān)鍵幀的操作值
- AnimatorUpdateListener：動畫更新監(jiān)聽
- AnimatorListener：動畫執(zhí)行監(jiān)聽，在動畫開始莹汤、重復(fù)快鱼、結(jié)束、取消時進行回調(diào)
總的來說纲岭，屬性動畫就是抹竹，動畫的執(zhí)行類來設(shè)置動畫操作的對象的屬性、持續(xù)時間止潮，開始和結(jié)束的屬性值柒莉，時間差值等，然后系統(tǒng)會根據(jù)設(shè)置的參數(shù)動態(tài)的變化對象的屬性沽翔。
深入學(xué)習(xí)：其他動畫 API
Android屬性動畫 http://bbs.itheima.com/thread-172632-1-1.html (出處: 黑馬程序員IT技術(shù)論壇)
Hongyang 的兩篇對屬性動畫完全解析
http://blog.csdn.net/lmj623565791/article/details/38067475
Android 4.4引入了新的視圖轉(zhuǎn)場框架兢孝。
找到一個學(xué)習(xí)的博客 http://www.reibang.com/p/98f2ec280945
挑戰(zhàn)練習(xí)
- 讓日落可逆（點擊屏幕窿凤，等太陽落下后，再次點擊屏幕跨蟹，讓太陽升起來）這里我的實現(xiàn)方式將一些動畫都定義為了類的成員變量雳殊，定義了兩個boolean類型，一個用戶判斷是落日還是升日窗轩，一個用于判斷用戶是否第一次點擊夯秃，這里由于要記錄最開始太陽的位置，因為在onCreateView方法中得到太陽位置都是0痢艺，視圖還沒創(chuàng)建好仓洼，還有個判斷是判別落日或者升日的動畫是否正在執(zhí)行，若是正在執(zhí)行則點擊屏幕無效
public class SunsetFragment extends Fragment {
private View mSceneView;
private View mSunView;
private View mSkyView;
private int mBlueSkyColor;
private int mSunsetSkyColor;
private boolean isSunDown = true; // 是否落日
private ObjectAnimator sunsetSkyAnimator;
private ObjectAnimator nightSkyAnimator;
private float sunYFirstStart;
private float sunYFirstEnd;
private boolean isFirstClick = true; // 是否第一次點擊
private ObjectAnimator downAnimatior;
private AnimatorSet downAnimatorSet;
private ObjectAnimator upAnimatior;
private AnimatorSet upAnimatorSet;
public static SunsetFragment newInstance() {
return new SunsetFragment();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_sunset, container, false);
mSceneView = view;
mSunView = view.findViewById(R.id.sun);
mSkyView = view.findViewById(R.id.sky);
mBlueSkyColor = ContextCompat.getColor(getActivity(), R.color.blue_sky);
mSunsetSkyColor = ContextCompat.getColor(getActivity(), R.color.sunset_sky);
initSkyAnimation();
mSceneView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (isFirstClick) {
sunYFirstStart = mSunView.getTop();
sunYFirstEnd = mSkyView.getHeight();
initUpDownAnimation();
}
isFirstClick = false;
if(!downAnimatorSet.isRunning() && !upAnimatorSet.isRunning()){
if (isSunDown) {
downAnimatorSet.start();
} else {
upAnimatorSet.start();
}
isSunDown = !isSunDown;
}
}
});
return view;
}
// 初始化落日堤舒，升日動畫
private void initUpDownAnimation() {
downAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYFirstStart, sunYFirstEnd).setDuration(3000);
downAnimatior.setInterpolator(new AccelerateInterpolator());
downAnimatorSet = new AnimatorSet();
downAnimatorSet.play(downAnimatior).with(sunsetSkyAnimator);
upAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYFirstEnd, sunYFirstStart).setDuration(3000);
upAnimatior.setInterpolator(new AccelerateInterpolator());
upAnimatorSet = new AnimatorSet();
upAnimatorSet.play(upAnimatior).with(nightSkyAnimator);
}
// 初始化天空顏色兩種動畫
private void initSkyAnimation() {
sunsetSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mBlueSkyColor, mSunsetSkyColor).setDuration(3000);
sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());
nightSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mSunsetSkyColor, mBlueSkyColor).setDuration(3000);
nightSkyAnimator.setEvaluator(new ArgbEvaluator());
}
}
- 添加太陽動畫特效（讓它有規(guī)律地放大或是加一圈旋轉(zhuǎn)的光線色建，海平面加上太陽倒影）
- 在日落過程中實現(xiàn)動畫反轉(zhuǎn)（在太陽慢慢下落時點擊屏幕，讓太陽無縫回升至原來所在位置舌缤，或者箕戳，在太陽落下進入夜晚時點擊屏幕，讓太陽重新升回天空）
