转载请注明出处 http://blog.csdn.net/qq_31715429/article/details/52710008
本文出自:猴菇先生的博客
一个Android属性动画的小练习,其中有位移translation、旋转rotation、透明度alpha、和颜色argb,代码比较啰嗦
1. 布局文件activity_tweeter.xml,分别是title、TabLayout、ViewPager和三个FlotingActionButton:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/activity_bg">
<include
android:id="@+id/titleBar"
layout="@layout/base_title" />
<include
android:id="@+id/tab"
layout="@layout/base_tab" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tab"
android:layout_marginTop="2dp" />
<!-- 用于点击背景,使得菜单fab闭合 -->
<RelativeLayout
android:id="@+id/fab_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true">
<android.support.design.widget.FloatingActionButton
android:id="@+id/edit_long"
style="@style/TweetEditFab"
android:layout_alignTop="@+id/menu"
android:alpha="0"
android:src="@mipmap/ic_fab_tweet"
app:borderWidth="0dp"
app:fabSize="mini" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/edit_tweet"
style="@style/TweetEditFab"
android:layout_alignTop="@+id/menu"
android:alpha="0"
android:src="@mipmap/ic_fab_post"
app:borderWidth="0dp"
app:fabSize="mini" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/menu"
style="@style/TweetEditFab"
android:layout_alignParentBottom="true"
android:src="@mipmap/ic_fab_default"
app:borderWidth="0dp"
app:fabSize="normal" />
</RelativeLayout>
</RelativeLayout>
2.TweeterActivity.java:
/**
* 动态
*/
public class TwitterActivity extends BaseActivity implements ViewPager.OnPageChangeListener {
@BindView(R.id.title)
TextView mTitle;
@BindView(R.id.tab)
TabLayout mTab;
@BindView(R.id.pager)
ViewPager mPager;
@BindView(R.id.fab_bg)
RelativeLayout mFabBg;
@BindView(R.id.menu)
FloatingActionButton mMenuFab;//菜单按钮
@BindView(R.id.edit_tweet)
FloatingActionButton mEditTweetFab;//动态
@BindView(R.id.edit_long)
FloatingActionButton mEditLongFab;//长文章
private String[] mTabTitle = {"动态", "热门", "我的"};
private List<Fragment> mFragments = new ArrayList<>();
private boolean mFlag = true;//菜单是否展开的标记
private int mAnimDuration = 300;//fab动画时长
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_twitter);
ButterKnife.bind(this);
mTitle.setText("动态");
mFabBg.setEnabled(false);//设置fab背景不可点击
mFabBg.setClickable(false);
mTab.setTabMode(TabLayout.MODE_FIXED);
for (int i = 0; i < mTabTitle.length; i++) {
mTab.addTab(mTab.newTab().setText(mTabTitle[i]));
}
mFragments.add(TweetTimelineFragment.newInstance());
mFragments.add(TweetHotFragment.newInstance());
mFragments.add(TweetMyFragment.newInstance());
TabFragmentPagerAdapter pagerAdapter = new TabFragmentPagerAdapter
(getSupportFragmentManager(), mFragments, mTabTitle);
mPager.setAdapter(pagerAdapter);//ViewPager的adapter不再啰嗦
mTab.setupWithViewPager(mPager);
mPager.addOnPageChangeListener(this);
}
@OnClick(R.id.menu)
public void menu() {
//如果处于透明状态,代表viewpager在翻页
if (mMenuFab.getAlpha() != 1) {
//设置菜单fab不可点击
return;
}
if (mFlag) {
openMenu();
} else {
closeMenu();
}
}
/**
* 展开菜单
*/
private void openMenu() {
//改变fab背景使其由透明变暗
//ofArgb方法在api21以上才有
// ValueAnimator fabBgAnim = ValueAnimator.ofArgb(android.R.color.transparent, getResources().getColor(R.color.tweet_fab_bg));
// fabBgAnim.setDuration(mAnimDuration);
// fabBgAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
// @Override
// public void onAnimationUpdate(ValueAnimator animation) {
// int value = (int) animation.getAnimatedValue();
// mFabBg.setBackgroundColor(value);
// }
// });
ObjectAnimator fabBgAnim = ObjectAnimator.ofInt(mFabBg, "backgroundColor",
android.R.color.transparent, getResources().getColor(R.color.tweet_fab_bg));//背景颜色 #80000000是半透明
//这种估值器可以用来执行类型之间的插值整数值代表ARGB颜色
fabBgAnim.setEvaluator(new ArgbEvaluator());
fabBgAnim.setDuration(mAnimDuration);
ObjectAnimator menuAnim = ObjectAnimator.ofFloat(mMenuFab, "rotation", 0, 45);//旋转
menuAnim.setDuration(mAnimDuration);
ObjectAnimator editTweetAnim1 = ObjectAnimator.ofFloat(mEditTweetFab, "alpha", 0, 1);//透明度
editTweetAnim1.setDuration(mAnimDuration / 2);
ObjectAnimator editTweetAnim2 = ObjectAnimator.ofFloat(mEditTweetFab, "rotation", 0, 360);
editTweetAnim2.setDuration(mAnimDuration / 2);
ObjectAnimator editTweetAnim3 = ObjectAnimator.ofFloat(mEditTweetFab, "translationY", -DensityUtils.dp2px(this, 60));//位移
editTweetAnim3.setDuration(mAnimDuration / 2);
ObjectAnimator editLongAnim1 = ObjectAnimator.ofFloat(mEditLongFab, "alpha", 0, 1);
editLongAnim1.setDuration(mAnimDuration / 2);
editLongAnim1.setStartDelay(mAnimDuration / 2);
ObjectAnimator editLongAnim2 = ObjectAnimator.ofFloat(mEditLongFab, "rotation", 0, 360);
editLongAnim2.setDuration(mAnimDuration / 2);
editLongAnim2.setStartDelay(mAnimDuration / 2);
ObjectAnimator editLongAnim3 = ObjectAnimator.ofFloat(mEditLongFab, "translationY", -DensityUtils.dp2px(this, 120));
editLongAnim3.setDuration(mAnimDuration);
AnimatorSet animSet = new AnimatorSet();
animSet.setInterpolator(new LinearInterpolator());
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
animSet.playTogether(fabBgAnim, menuAnim, editTweetAnim1, editTweetAnim2,
editTweetAnim3, editLongAnim1, editLongAnim2, editLongAnim3);
} else {
animSet.playTogether(menuAnim, editTweetAnim1, editTweetAnim2,
editTweetAnim3, editLongAnim1, editLongAnim2, editLongAnim3);
}
animSet.start();
mFlag = !mFlag;
mFabBg.setEnabled(true);//设置fab背景不可点击
mFabBg.setClickable(true);
}
/**
* 关闭菜单
*/
private void closeMenu() {
//改变fab背景使其还原透明状态
// ValueAnimator fabBgAnim = ValueAnimator.ofArgb(getResources().getColor(R.color.tweet_fab_bg), android.R.color.transparent);
// fabBgAnim.setDuration(mAnimDuration);
// fabBgAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
// @Override
// public void onAnimationUpdate(ValueAnimator animation) {
// int value = (int) animation.getAnimatedValue();
// mFabBg.setBackgroundColor(value);
// }
// });
ObjectAnimator fabBgAnim = ObjectAnimator.ofInt(mFabBg, "backgroundColor",
getResources().getColor(R.color.tweet_fab_bg), android.R.color.transparent);
fabBgAnim.setEvaluator(new ArgbEvaluator());
fabBgAnim.setDuration(mAnimDuration);
ObjectAnimator menuAnim = ObjectAnimator.ofFloat(mMenuFab, "rotation", 45, 0);
menuAnim.setDuration(mAnimDuration);
ObjectAnimator editTweetAnim1 = ObjectAnimator.ofFloat(mEditTweetFab, "alpha", 1, 0);
editTweetAnim1.setDuration(mAnimDuration / 2);
editTweetAnim1.setStartDelay(mAnimDuration / 2);
ObjectAnimator editTweetAnim2 = ObjectAnimator.ofFloat(mEditTweetFab, "rotation", 0, 360);
editTweetAnim2.setDuration(mAnimDuration / 2);
editTweetAnim2.setStartDelay(mAnimDuration / 2);
ObjectAnimator editTweetAnim3 = ObjectAnimator.ofFloat(mEditTweetFab, "translationY", 0);
editTweetAnim3.setDuration(mAnimDuration / 2);
editTweetAnim3.setStartDelay(mAnimDuration / 2);
ObjectAnimator editLongAnim1 = ObjectAnimator.ofFloat(mEditLongFab, "alpha", 1, 0);
editLongAnim1.setDuration(mAnimDuration / 2);
ObjectAnimator editLongAnim2 = ObjectAnimator.ofFloat(mEditLongFab, "rotation", 0, 360);
editLongAnim2.setDuration(mAnimDuration / 2);
ObjectAnimator editLongAnim3 = ObjectAnimator.ofFloat(mEditLongFab, "translationY", 0);
editLongAnim3.setDuration(mAnimDuration);
AnimatorSet animSet = new AnimatorSet();
animSet.setInterpolator(new LinearInterpolator());
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
animSet.playTogether(fabBgAnim, menuAnim, editTweetAnim1, editTweetAnim2,
editTweetAnim3, editLongAnim1, editLongAnim2, editLongAnim3);
} else {
animSet.playTogether(menuAnim, editTweetAnim1, editTweetAnim2,
editTweetAnim3, editLongAnim1, editLongAnim2, editLongAnim3);
}
animSet.start();
mFlag = !mFlag;
mFabBg.setEnabled(false);//设置fab背景不可点击
mFabBg.setClickable(false);
}
/**
* viewpager翻页监听,动态改变菜单fab的透明度
*
* @param position 下标
* @param positionOffset 偏移比
* @param positionOffsetPixels 偏移量
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == 0) {//position为0(即动态页)时,显示菜单fab
mMenuFab.setVisibility(View.VISIBLE);
mMenuFab.setAlpha(1 - positionOffset);
} else {
mMenuFab.setVisibility(View.GONE);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 点击fab背景关闭fab菜单
* 实现mFabBg.setCanceledOnTouchOutside(true)的效果
*/
@OnClick(R.id.fab_bg)
public void setFabBgDark() {
if (mFabBg.isClickable()) {
mFabBg.setClickable(false);
mFabBg.setEnabled(false);
closeMenu();
}
}
@OnClick(R.id.edit_tweet)
public void editTweet() {
ToastUtil.show(this, "动态");
}
@OnClick(R.id.edit_long)
public void editLong() {
ToastUtil.show(this, "长文章");
}
@OnClick(R.id.back)
public void toBack() {
finish();
}
}
点击menu菜单开始动画,同时背景变暗,注意这几个动画之间的时间协调;再次点击菜单闭合,背景变为透明;实现点击背景菜单闭合;实现viewpager翻页监听,动态改变菜单fab的透明度。