好傷心啊凡壤，webm轉(zhuǎn)化成的pdf在簡書上居然無法正常播放终抽，我要怎么給寶寶們展示動態(tài)效果呢，藍瘦香菇...上截圖~~
嗯啦嗯啦，安啦材义，那個??在冒煙兒，是均勻分布的啦昵慌！
怎么實現(xiàn)的呢？so easy袭蝗！
布局首先是個FrameLayout，里面有包含8個imageview,一起堆在左上角般婆，布局文件如下：
<?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">
<ImageView
android:id="@+id/iv_b"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/b" />
<ImageView
android:id="@+id/iv_c"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/c" />
<ImageView
android:id="@+id/iv_d"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/d" />
<ImageView
android:id="@+id/iv_e"
android:layout_width="50dp"
android:layout_margin="10dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/e" />
<ImageView
android:id="@+id/iv_f"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/f" />
<ImageView
android:id="@+id/iv_g"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/g" />
<ImageView
android:id="@+id/iv_h"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="10dp"
android:contentDescription="@null"
android:src="@drawable/h" />
<ImageView
android:id="@+id/iv_a"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@null"
android:src="@drawable/a" />
</FrameLayout>
然后在我們的頁面里面把這些imageView放到一個集合里面：
private int[] resIds = {R.id.iv_a, R.id.iv_b, R.id.iv_c, R.id.iv_d, R.id.iv_e,
R.id.iv_f, R.id.iv_g, R.id.iv_h};
private List<ImageView> imageViews = new ArrayList<>();
for (int resId : resIds) {
ImageView imageView = findViewById(resId);
imageView.setOnClickListener(this);
imageViews.add(imageView);
}
然后對iv_a這個設置一個點擊事件到腥，點一下展開menu，再點一下關(guān)閉menu蔚袍。
一言不合上代碼....
先說垂直展開菜單這個乡范，設置Y軸偏移量根據(jù)i值變化，就可以程序上圖那種萌萌噠的狀態(tài)啦：
private void openMenu() {
for (int i = 1; i < resIds.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViews.get(i), "translationY",
0F, i * 300F);
animator.setDuration(500);
animator.setInterpolator(new AccelerateInterpolator());
// animator.setStartDelay(i*300);
animator.start();
}
expand = true;
}
關(guān)上啤咽！把這個菜單關(guān)上就是把所有的偏移量從現(xiàn)在的偏移量恢復成0：
private void closeMenu() {
for (int i = 1; i < resIds.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViews.get(i), "translationY",
i * 300F, 0F);
animator.setDuration(500);
animator.setInterpolator(new AccelerateInterpolator());
// animator.setStartDelay(i*300);
animator.start();
}
expand = false;
}
這里我解釋一下 ObjectAnimator.ofFloat里面的幾個參數(shù)晋辆，第一個參數(shù)是target，就是需要進行動畫操作的目標宇整，沒錯瓶佳，就是這些imageView啦，第二個參數(shù)鳞青，需要改變的屬性霸饲，沒錯，就是我們的Y軸偏移量TranslationY啦盼玄，后面的屬性就是values贴彼，就是我們的屬性值從哪個值變化到哪個值，可以清楚地看到展開菜單和關(guān)閉菜單的不同就是屬性值的變化不同埃儿，展開是從0→i300器仗，關(guān)閉時從i300→0。
setDuration就是動畫從開始到結(jié)束這個時間長短童番。
setInterpolator就是動畫的插值器精钮，設置動畫變化的規(guī)律，有9個默認的插值器剃斧，這里用的是默認的加速插值器AccelerateInterpolator轨香，還有減速啊，回彈啊等等之類的幼东，好的插值器鏈接參照：http://www.reibang.com/p/88740cba25e6
一般插值器是為了讓動畫效果更接近現(xiàn)實臂容，so，根據(jù)自身需要決定是否使用根蟹。
好脓杉，下一個，扇形展開菜單简逮！
扇形的怎么展開呢球散？簡單一看就是不僅有Y軸的偏移量還有X軸的偏移量！要讓他呈扇形均勻展開散庶，就是把扇形平均分成imageViews.size() - 1份蕉堰，回顧一下數(shù)學：
弧度的定義：弧長等于圓半徑長的弧所對的圓心角為1弧度凌净，弧度沒有單位。
即弧度=弧長/半徑=l/r,因此屋讶，若弧度=π冰寻，弧長=πr=圓周的一半，此時恰好為一個半圓皿渗，圓心角180性雄，也就是說π=180，1°=π/180
所以我們的角度計算公式為：
angle = (float) Math.PI / (2 * (imageViews.size() - 1));//(π/2)/(imageViews.size() - 1)
三角函數(shù)計算x軸y軸的偏移量：
float x = (float) (r * Math.sin(i * angle));
float y = (float) (r * Math.cos(i * angle));
不懂得同學請自己摸出草稿本畫三角形
三角形的展開和收起動畫：
private void angleOpenMenu(float angle, float r) {
for (int i = 1; i < resIds.length; i++) {
float x = (float) (r * Math.sin(i * angle));
float y = (float) (r * Math.cos(i * angle));
PropertyValuesHolder translationX = PropertyValuesHolder.ofFloat("translationX", 0F, x);
PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", 0F, y);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViews.get(i),
translationX, translationY);
animator.setInterpolator(new AccelerateInterpolator());
animator.setDuration(500).start();
}
expand = true;
}
private void closeOpenMenu(float angle, float r) {
for (int i = 1; i < resIds.length; i++) {
float x = (float) (r * Math.sin(i * angle));
float y = (float) (r * Math.cos(i * angle));
PropertyValuesHolder translationX = PropertyValuesHolder.ofFloat("translationX", x, 0F);
PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", y, 0F);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViews.get(i),
translationX, translationY);
animator.setInterpolator(new AccelerateInterpolator());
animator.setDuration(500).start();
}
expand = false;
}
細心的同學可以看到里面多了個PropertyValuesHolder羹奉，這個是用于組合多個動畫，也可以像垂直展開動畫一樣單獨寫约计，如果需要定義動畫順序诀拭，比如先Y軸便宜再X軸偏移，或者Z軸和Y軸一起偏移煤蚌，就需要使用AnimatorSet耕挨。
簡單說一下AnimatorSet：
AnimatorSet.playTogether//動畫一起播放；
AnimatorSet.playSequentially//動畫按照順序播放尉桩；
AnimatorSet.play(translationX).with(translationY)//動畫X和Y一起播放筒占；
AnimatorSet.play(translationY).after(translationX)//動畫Y在動畫X之后執(zhí)行
好，到此結(jié)束蜘犁。
有不對的地方請指正翰苫，O(∩_∩)O謝謝。
