前言
Android应用市场现在愈来愈受欢迎了,有一部分缘由是它可以模拟物理世界,让人有身临其境的感觉,提升用户的体验。
这里就介绍一下简单的落日景象的模拟应用。html
代码详解
(一)使用抽象的activity托管fragment
一、通用的fragment托管布局(activity_fragment.xml):java
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
二、抽象的activity类(SingleFragmentActivity.java):android
public abstract class SingleFragmentActivity extends FragmentActivity {
protected abstract Fragment createFragment();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
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布局里实例化activity视图,而后在容器中查找FragmentManager里的fragment。若是找不到,就新建fragment并将其添加到容器中。web
(二)创建场景
一、新建一个模拟太阳的drawable资源(sun.xml):编程
android:shape="oval">
二、创建布局文件构建整个场景(fragment_sunset.xml):ide
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/sky"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:background="@color/blue_sky">
android:id="@+id/sun"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="@drawable/sun"
/>
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.39"
android:background="@color/sea"
/>
三、新建SunsetFragment类(SunsetFragment.java):svg
public class SunsetFragment extends Fragment {
public static SunsetFragment newInstance() {
return new SunsetFragment();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_sunset, container, false);
return view;
}
}
四、建立SunsetFragment类(SunsetActivity.java):函数
public class SunsetActivity extends SingleFragmentActivity {
@Override
protected Fragment createFragment() {
return SunsetFragment.newInstance();
}
}
到这里,就可以看见一个太阳在水平线上的静态应用了。
布局
(三)简单属性动画
一、获取视图引用
在SunsetFragment.java中添加如下代码:优化
private View mSceneView;
private View mSunView;
private View mSkyView;
在onCreateView函数中添加:
mSceneView = view;
mSunView = view.findViewById(R.id.sun);
mSkyView = view.findViewById(R.id.sky);
二、获取视图的顶部坐标位置
在SunsetFragment.java中添加如下代码:
private void startAnimation() {
float sunYStart = mSunView.getTop();
float sunYEnd = mSkyView.getHeight();
}
三、建立一个ObjectAnimator对象执行动画
在SunsetFragment.java的startAnimation函数中添加如下代码:
ObjectAnimator heightAnimator = ObjectAnimator
.ofFloat(mSunView, "y", sunYStart, sunYEnd)
.setDuration(3000);
heightAnimator.start();
四、为mSceneView视图设置监听器
在SunsetFragment.java的onCreateView函数中添加如下代码:
mSceneView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startAnimation();
}
});
到这边,就能实现落日的动态应用。
(四)优化动画效果
一、添加加速特效
在SunsetFragment.java的startAnimation函数中添加如下代码:
heightAnimator.setInterpolator(new AccelerateInterpolator());
二、色彩渐变
2.一、取出日落色彩资源
private int mBlueSkyColor;
private int mSunsetSkyColor;
private int mNightSkyColor;
Resources resources = getResources();
mBlueSkyColor = resources.getColor(R.color.blue_sky);
mSunsetSkyColor = resources.getColor(R.color.sunset_sky);
mNightSkyColor = resources.getColor(R.color.night_sky);
2.二、实现天空的色彩变化
ObjectAnimator sunsetSkyAnimator = ObjectAnimator
.ofInt(mSkyView, "backgroundColor", mBlueSkyColor, mSunsetSkyColor)
.setDuration(3000);
sunsetSkyAnimator.start();
2.三、增长色彩的过渡
sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());
到这里,就能实现背景从蓝色到橘黄色的色彩的天然过渡。
(五)播放多个动画
一、建立夜空动画
在SunsetFragment.java的startAnimation函数中添加如下代码,并删除原来的动画启动代码:
ObjectAnimator nightSkyAnimator = ObjectAnimator
.ofInt(mSkyView, "backgroundColor", mSunsetSkyColor, mNightSkyColor)
.setDuration(1500);
nightSkyAnimator.setEvaluator(new ArgbEvaluator());
二、建立动画集
在SunsetFragment.java的startAnimation函数中添加如下代码:
AnimatorSet animatorSet = new AnimatorSet();
animatorSet
.play(heightAnimator)
.with(sunsetSkyAnimator)
.before(nightSkyAnimator);
animatorSet.start();
若有发现不当或错误之处,欢迎指导评论!