有的时候会需要做一些自定义的动画效果，在会反复用到的动画效果可以考虑做成动画框架，方便使用，做成框架的话就需要考虑很多的问题，最典型的问题就是属性和方法必须要是可配置的，这里就来聊一聊自定义动画框架的做法

重难点分析

在自定义动画框架里面，最难的一个问题就是怎么样获得属性，如果直接写自定义的属性，那么编译时候就会报错了，那么自然就想到了在外层包裹自定义的属性，通过处理自定义的属性来得到，这样便是android源代码一些控件的解决办法，其实就是一招偷梁换柱，在处理的时候，如果是自定义的属性，就自己处理，如果不是自定义的属性，就交由系统处理，然后在addView上再做手脚，另外从xml的解析入手，可以自定义LayoutInflater，然后重写onCreateView()，在里面就可以完成偷梁换柱，故这里有两种方法可以完成

在addView时候拦截做法

这里做一个滑动的自定义动画

在滑动的View里面，需要实现滑动时候和重置的工作，这里有一个接口，及实现接口的方法来做

  1. public interface DiscrollvableInterface {
  2.     //当滑动的时候调用该方法，用来控制里面的控件执行相应的动画
  3.     void onDiscrollve(float ratio);
  4.     //重置view的属性----恢复view的原来属性
  5.     void onResetDiscrollve();
  6. }

实现上面的接口

  1. public class DiscrollvableView extends FrameLayout implements DiscrollvableInterface {
  3.     private static final int TRANSLATION_FROM_TOP = 0x01;
  4.     private static final int TRANSLATION_FROM_BOTTOM = 0x02;
  5.     private static final int TRANSLATION_FROM_LEFT = 0x04;
  6.     private static final int TRANSLATION_FROM_RIGHT = 0x08;
  8.     //颜色估值器
  9.     private static ArgbEvaluator sArgbEvaluator = new ArgbEvaluator();
  10.     //自定义属性的一些接收的变量
  11.     private int mDiscrollveFromBgColor;//背景颜色变化开始值
  12.     private int mDiscrollveToBgColor;//背景颜色变化结束值
  13.     private boolean mDiscrollveAlpha;//是否需要透明度动画
  14.     private int mDisCrollveTranslation;//平移值
  15.     private boolean mDiscrollveScaleX;//是否需要x轴方向缩放
  16.     private boolean mDiscrollveScaleY;//是否需要y轴方向缩放
  17.     private int mHeight;//本view的高度
  18.     private int mWidth;//宽度
  20.     public void setmDiscrollveFromBgColor(int mDiscrollveFromBgColor) {
  21.         this.mDiscrollveFromBgColor = mDiscrollveFromBgColor;
  22.     }
  24.     public void setmDiscrollveToBgColor(int mDiscrollveToBgColor) {
  25.         this.mDiscrollveToBgColor = mDiscrollveToBgColor;
  26.     }
  28.     public void setmDiscrollveAlpha(boolean mDiscrollveAlpha) {
  29.         this.mDiscrollveAlpha = mDiscrollveAlpha;
  30.     }
  32.     public void setmDisCrollveTranslation(int mDisCrollveTranslation) {
  33.         this.mDisCrollveTranslation = mDisCrollveTranslation;
  34.     }
  36.     public void setmDiscrollveScaleX(boolean mDiscrollveScaleX) {
  37.         this.mDiscrollveScaleX = mDiscrollveScaleX;
  38.     }
  40.     public void setmDiscrollveScaleY(boolean mDiscrollveScaleY) {
  41.         this.mDiscrollveScaleY = mDiscrollveScaleY;
  42.     }
  44.     @Override
  45.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  46.         super.onSizeChanged(w, h, oldw, oldh);
  47.         mWidth = w;
  48.         mHeight = h;
  49.         onResetDiscrollve();
  50.     }
  52.     public DiscrollvableView(Context context, AttributeSet attrs) {
  53.         super(context, attrs);
  54.     }
  56.     public DiscrollvableView(Context context) {
  57.         super(context);
  58.     }
  60.     @Override
  61.     public void onDiscrollve(float ratio) {
  62.         // ratio:0~1
  63.         //控制自身的动画属性
  64.         if (mDiscrollveAlpha) {
  65.             setAlpha(ratio);
  66.         }
  67.         if (mDiscrollveScaleX) {
  68.             setScaleX(ratio);
  69.         }
  70.         if (mDiscrollveScaleY) {
  71.             setScaleY(ratio);
  72.         }
  73.         //判断到底是哪一种值：fromTop,fromBottom,fromLeft,fromRight
  74.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_BOTTOM)) {
  75.             setTranslationY(mHeight * (1 - ratio));//mHeight-->0(代表原来的位置)
  76.         }
  77.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_TOP)) {
  78.             setTranslationY(-mHeight * (1 - ratio));//-mHeight-->0(代表原来的位置)
  79.         }
  80.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_LEFT)) {
  81.             setTranslationX(-mWidth * (1 - ratio));//-width-->0(代表原来的位置)
  82.         }
  83.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_RIGHT)) {
  84.             setTranslationX(mWidth * (1 - ratio));//width-->0(代表原来的位置)
  85.         }
  86.         //颜色渐变动画
  87.         if (mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) {
  88.             //ratio=0.5 color=中间颜色
  89.             setBackgroundColor((Integer) sArgbEvaluator.evaluate(ratio, mDiscrollveFromBgColor, mDiscrollveToBgColor));
  90.         }
  92.     }
  94.     private boolean isDiscrollTranslationFrom(int translationMask) {
  95.         if (mDisCrollveTranslation == -1) {
  96.             return false;
  97.         }
  98.         //fromLeft|fromBottom & fromBottom = fromBottom
  99.         return (mDisCrollveTranslation & translationMask) == translationMask;
  100.     }
  102.     @Override
  103.     public void onResetDiscrollve() {
  104.         //控制自身的动画属性
  105.         if (mDiscrollveAlpha) {
  106.             setAlpha(0);
  107.         }
  108.         if (mDiscrollveScaleX) {
  109.             setScaleX(0);
  110.         }
  111.         if (mDiscrollveScaleY) {
  112.             setScaleY(0);
  113.         }
  114.         //判断到底是哪一种值：fromTop,fromBottom,fromLeft,fromRight
  115.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_BOTTOM)) {
  116.             setTranslationY(mHeight);//mHeight-->0(代表原来的位置)
  117.         }
  118.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_TOP)) {
  119.             setTranslationY(-mHeight);//-mHeight-->0(代表原来的位置)
  120.         }
  121.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_LEFT)) {
  122.             setTranslationX(-mWidth);//-width-->0(代表原来的位置)
  123.         }
  124.         if (isDiscrollTranslationFrom(TRANSLATION_FROM_RIGHT)) {
  125.             setTranslationX(mWidth);//width-->0(代表原来的位置)
  126.         }
  127.     }
  128. }

那么便完成了对于滑动效果的控制，为了便于控制，自定义View继承ScrollView

  1. public class DiscrollView extends ScrollView {
  3.     private DiscrollViewContent mContent;
  5.     public DiscrollView(Context context, AttributeSet attrs) {
  6.         super(context, attrs);
  7.     }
  9.     @Override
  10.     protected void onFinishInflate() {
  11.         super.onFinishInflate();
  12.         View content = getChildAt(0);
  13.         mContent = (DiscrollViewContent) content;
  14.     }
  16.     @Override
  17.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  18.         super.onSizeChanged(w, h, oldw, oldh);
  19.         View first = mContent.getChildAt(0);
  20.         first.getLayoutParams().height = getHeight();
  21.     }
  23.     @Override
  24.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  25.         super.onScrollChanged(l, t, oldl, oldt);
  27.         int scrollViewHeight = getHeight();
  28.         //监听滑动----接口---->控制DiscrollViewContent的属性
  29.         //遍历MyLinearLayout里面所有子控件(MyViewGroup)
  30.         for (int i = 0; i < mContent.getChildCount(); i++) {
  31.             View child = mContent.getChildAt(i);
  32.             if (!(child instanceof DiscrollvableInterface)) {
  33.                 continue;
  34.             }
  36.             //ratio:0~1
  37.             DiscrollvableInterface discrollvableInterface = (DiscrollvableInterface) child;
  38.             //1.child离scrollview顶部的高度
  39.             int discrollvableTop = child.getTop();
  40.             int discrollvableHeight = child.getHeight();
  42.             //2.得到scrollview滑出去的高度
  43.             //3.得到child离屏幕顶部的高度
  44.             int discrollvableAbsoluteTop = discrollvableTop - t;
  45.             //什么时候执行动画？当child滑进屏幕的时候
  46.             if (discrollvableAbsoluteTop <= scrollViewHeight) {
  47.                 int visibleGap = scrollViewHeight - discrollvableAbsoluteTop;
  48.                 //确保ratio是在0~1，超过了1 也设置为1
  49.                 discrollvableInterface.onDiscrollve(clamp(visibleGap / (float) discrollvableHeight, 1f, 0f));
  50.             } else {//否则，就恢复到原来的位置
  51.                 discrollvableInterface.onResetDiscrollve();
  52.             }
  53.         }
  54.     }
  56.     public static float clamp(float value, float max, float min) {
  57.         return Math.max(Math.min(value, max), min);
  58.     }
  59. }

设置属性，偷梁换柱

  1. public class DiscrollViewContent extends LinearLayout {
  3.     public DiscrollViewContent(Context context, AttributeSet attrs) {
  4.         super(context, attrs);
  5.         setOrientation(VERTICAL);
  6.     }
  8.     @Override
  9.     public LayoutParams generateLayoutParams(AttributeSet attrs) {
  10.         // 得到xml里面穿过来的参数
  11.         return new MyLayoutParams(getContext(), attrs);
  12.     }
  14.     @Override
  15.     public void addView(View child, int index, android.view.ViewGroup.LayoutParams params) {
  16.         //从child里面拿到我自定义的属性，传到discrollvableView里面
  17.         MyLayoutParams p = (MyLayoutParams) params;
  18.         if (!isDiscrollvable(p)) {//判断该view是否穿了自定义属性值，不是就不需要执行动画，不包一层FrameLayout
  19.             super.addView(child, index, params);
  20.         } else {
  21.             //在addView里面插一脚，往child外面包裹一层FrameLayout
  22.             DiscrollvableView discrollvableView = new DiscrollvableView(getContext());
  23.             discrollvableView.setmDiscrollveAlpha(p.mDiscrollveAlpha);
  24.             discrollvableView.setmDisCrollveTranslation(p.mDisCrollveTranslation);
  25.             discrollvableView.setmDiscrollveScaleX(p.mDiscrollveScaleX);
  26.             discrollvableView.setmDiscrollveScaleY(p.mDiscrollveScaleY);
  27.             discrollvableView.setmDiscrollveFromBgColor(p.mDiscrollveFromBgColor);
  28.             discrollvableView.setmDiscrollveToBgColor(p.mDiscrollveToBgColor);
  29.             discrollvableView.addView(child);
  30.             super.addView(discrollvableView, index, params);
  31.         }
  32.     }
  34.     private boolean isDiscrollvable(MyLayoutParams p) {
  35.         return p.mDiscrollveAlpha || p.mDiscrollveScaleX
  36.                 || p.mDiscrollveScaleY || p.mDisCrollveTranslation != -1
  37.                 || (p.mDiscrollveFromBgColor != -1 && p.mDiscrollveToBgColor != -1);
  38.     }
  40.     public static class MyLayoutParams extends LinearLayout.LayoutParams {
  41.         public int mDiscrollveFromBgColor;//背景颜色变化开始值
  42.         public int mDiscrollveToBgColor;//背景颜色变化结束值
  43.         public boolean mDiscrollveAlpha;//是否需要透明度动画
  44.         public int mDisCrollveTranslation;//平移值
  45.         public boolean mDiscrollveScaleX;//是否需要x轴方向缩放
  46.         public boolean mDiscrollveScaleY;//是否需要y轴方向缩放
  47.         public MyLayoutParams(Context context, AttributeSet attrs) {
  48.             super(context, attrs);
  49.             // 从child里面拿到我自定义的属性
  50.             TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiscrollView_LayoutParams);
  51.             mDiscrollveAlpha = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_alpha, false);
  52.             mDiscrollveScaleX = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleX, false);
  53.             mDiscrollveScaleY = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleY, false);
  54.             mDisCrollveTranslation = a.getInt(R.styleable.DiscrollView_LayoutParams_discrollve_translation, -1);
  55.             mDiscrollveFromBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_fromBgColor, -1);
  56.             mDiscrollveToBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_toBgColor, -1);
  57.             a.recycle();
  58.         }
  59.     }
  60. }

最后是一些自定义属性

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <resources>
  3.     <declare-styleable name="DiscrollView_LayoutParams">
  4.         <attr name="discrollve_alpha" format="boolean"/>
  5.         <attr name="discrollve_scaleX" format="boolean"/>
  6.         <attr name="discrollve_scaleY" format="boolean"/>
  7.         <attr name="discrollve_fromBgColor" format="color"/>
  8.         <attr name="discrollve_toBgColor" format="color"/>
  9.         <attr name="discrollve_translation"/>
  10.     </declare-styleable>
  12.     <attr name="discrollve_translation">
  13.         <flag name="fromTop" value="0x01" />
  14.         <flag name="fromBottom" value="0x02" />
  15.         <flag name="fromLeft" value="0x04" />
  16.         <flag name="fromRight" value="0x08" />
  17.     </attr>
  18. </resources>

布局

  1. <com.cj5785.customanimationaddview.DiscrollView xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:custom="http://schemas.android.com/apk/res-auto"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  6.     <com.cj5785.customanimationaddview.DiscrollViewContent
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent">
  10.         <TextView
  11.             android:layout_width="match_parent"
  12.             android:layout_height="560dp"
  13.             android:background="@android:color/white"
  14.             android:gravity="center"
  15.             android:text="测试文字使用情况"
  16.             android:textSize="25sp" />
  18.         <View
  19.             android:layout_width="match_parent"
  20.             android:layout_height="200dp"
  21.             android:background="@android:color/darker_gray"
  22.             custom:discrollve_alpha="true" />
  24.         <ImageView
  25.             android:layout_width="89dp"
  26.             android:layout_height="80dp"
  27.             android:src="@drawable/duck"
  28.             custom:discrollve_alpha="true"
  29.             custom:discrollve_translation="fromLeft|fromBottom" />
  31.         <View
  32.             android:layout_width="match_parent"
  33.             android:layout_height="200dp"
  34.             custom:discrollve_fromBgColor="#ffff00"
  35.             custom:discrollve_toBgColor="#88EE66" />
  37.         <ImageView
  38.             android:layout_width="150dp"
  39.             android:layout_height="106dp"
  40.             android:layout_gravity="right"
  41.             android:src="@drawable/camera"
  42.             custom:discrollve_translation="fromRight" />
  44.         <TextView
  45.             android:layout_width="match_parent"
  46.             android:layout_height="wrap_content"
  47.             android:gravity="center"
  48.             android:text="第二段文字使用测试"
  49.             android:textSize="28sp"
  50.             custom:discrollve_alpha="true"
  51.             custom:discrollve_translation="fromBottom" />
  53.         <ImageView
  54.             android:layout_width="wrap_content"
  55.             android:layout_height="wrap_content"
  56.             android:layout_gravity="center"
  57.             android:layout_margin="20dp"
  58.             android:src="@drawable/sun"
  59.             custom:discrollve_scaleX="true"
  60.             custom:discrollve_scaleY="true" />
  62.         <ImageView
  63.             android:layout_width="wrap_content"
  64.             android:layout_height="wrap_content"
  65.             android:layout_gravity="center"
  66.             android:layout_margin="20dp"
  67.             android:src="@drawable/balloon"
  68.             custom:discrollve_translation="fromLeft|fromBottom" />
  70.     </com.cj5785.customanimationaddview.DiscrollViewContent>
  72. </com.cj5785.customanimationaddview.DiscrollView>

效果如下

自定义LayoutInflater

这里实现一个仿小红书的视差动画效果

首先定义一个根布局，然后实例化其自定义控件

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="@android:color/white">
  7.     <com.cj5785.customanimationlayoutinflater.ParallaxContainer
  8.         android:id="@+id/parallax_container"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"/>
  12.     <ImageView
  13.         android:id="@+id/iv_man"
  14.         android:layout_width="66dp"
  15.         android:layout_height="202dp"
  16.         android:layout_alignParentBottom="true"
  17.         android:layout_centerHorizontal="true"
  18.         android:layout_marginBottom="10dp"
  19.         android:background="@drawable/intro_item_manrun_1"/>
  21. </RelativeLayout>

实例化自定义控件，在最后一个登陆界面，由于与前面的不同，使用切换Fragment的方式，需要使用到适配器

适配器

  1. public class ParallaxAdapter extends FragmentPagerAdapter {
  2.     private List<ParallaxFragment> fragmentList;
  4.     public ParallaxAdapter(FragmentManager fm, List<ParallaxFragment> fragmentList) {
  5.         super(fm);
  6.         this.fragmentList = fragmentList;
  7.     }
  9.     @Override
  10.     public Fragment getItem(int position) {
  11.         return fragmentList.get(position);
  12.     }
  14.     @Override
  15.     public int getCount() {
  16.         return fragmentList.size();
  17.     }
  18. }

自定义Fragment，其主要的偷梁换柱工作就是在这里完成的，返回我们处理以后的View

  1. public class ParallaxFragment extends Fragment {
  2.     private List<View> parallaxViews = new ArrayList<>();
  4.     @Nullable
  5.     @Override
  6.     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  7.         Bundle bundle = getArguments();
  8.         int layoutId = bundle.getInt("layoutId");
  9.         //正常情况下在这里获得view，然后返回，我们就在这里偷梁换柱
  10. //        View view = inflater.inflate(layoutId, container);
  11.         //使用自定义的渲染器渲染
  12.         ParallaxLayoutInflater layoutInflater = new ParallaxLayoutInflater(inflater, getActivity(), this);
  14.         return layoutInflater.inflate(layoutId, null);
  15.     }
  17.     public List<View> getParallaxViews() {
  18.         return parallaxViews;
  19.     }
  20. }

动画引导层

  1. //引导页的最外层布局
  2. public class ParallaxContainer extends FrameLayout implements OnPageChangeListener {
  3.     private List<ParallaxFragment> fragmentList;
  4.     private ParallaxAdapter adapter;
  5.     private float containerWidth;
  6.     private ImageView iv_man;
  8.     public ParallaxContainer(@NonNull Context context, @Nullable AttributeSet attrs) {
  9.         super(context, attrs);
  10.     }
  12.     //指定引导页的所有页面布局文件
  13.     public void setUp(int... ids) {
  14.         //初始化framentList，在调用处直接调用setUp()
  15.         fragmentList = new ArrayList<>();
  16.         for (int i = 0; i < ids.length; i++) {
  17.             ParallaxFragment fragment = new ParallaxFragment();
  18.             Bundle bundle = new Bundle();
  19.             //Fragment中需要加载的布局文件id
  20.             bundle.putInt("layoutId", ids[i]);
  21.             fragment.setArguments(bundle);
  22.             fragmentList.add(fragment);
  23.         }
  24.         //设置ViewPager
  25.         ViewPager viewPager = new ViewPager(getContext());
  26.         viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  27.         viewPager.setId(R.id.parallax_pager);
  28.         adapter = new ParallaxAdapter(((MainActivity) getContext()).getSupportFragmentManager(), fragmentList);
  29.         viewPager.setAdapter(adapter);
  30.         addView(viewPager, 0);
  31.         //设置监听
  32.         viewPager.addOnPageChangeListener(this);
  33.     }
  35.     @Override
  36.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  37.         containerWidth = getWidth();
  38.         //在翻页的过程中，不断根据视图的标签中对应的动画参数，改变视图的位置或者透明度
  39.         //获取到进入的页面
  40.         ParallaxFragment inFragment = null;
  41.         try {
  42.             inFragment = fragmentList.get(position - 1);
  43.         } catch (Exception e) {
  44.         }
  45.         //获取到退出的页面
  46.         ParallaxFragment outFragment = null;
  47.         try {
  48.             outFragment = fragmentList.get(position);
  49.         } catch (Exception e) {
  50.         }
  52.         if (inFragment != null) {
  53.             //获取Fragment上所有的视图，实现动画效果
  54.             List<View> inViews = inFragment.getParallaxViews();
  55.             if (inViews != null) {
  56.                 for (View view : inViews) {
  57.                     //获取标签，从标签上获取所有的动画参数
  58.                     ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
  59.                     if (tag == null) {
  60.                         continue;
  61.                     }
  62.                     //translationY改变view的偏移位置，translationY=100，代表view在其原始位置向下移动100
  63.                     //仔细观察进入的fragment中view从远处过来，不断向下移动，最终停在原始位置
  64.                     view.setTranslationX((containerWidth - positionOffsetPixels) * tag.xIn);
  65.                     view.setTranslationY((containerWidth - positionOffsetPixels) * tag.yIn);
  66.                 }
  67.             }
  68.         }
  70.         if (outFragment != null) {
  71.             List<View> outViews = outFragment.getParallaxViews();
  72.             if (outViews != null) {
  73.                 for (View view : outViews) {
  74.                     ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
  75.                     if (tag == null) {
  76.                         continue;
  77.                     }
  78.                     //仔细观察退出的fragment中view从原始位置开始向上移动，translationY应为负数
  79.                     view.setTranslationX((-positionOffsetPixels) * tag.xOut);
  80.                     view.setTranslationY((-positionOffsetPixels) * tag.yOut);
  81.                 }
  82.             }
  83.         }
  84.     }
  86.     @Override
  87.     public void onPageSelected(int position) {
  88.         if (position == adapter.getCount() - 1) {
  89.             iv_man.setVisibility(INVISIBLE);
  90.         } else {
  91.             iv_man.setVisibility(VISIBLE);
  92.         }
  93.     }
  95.     @Override
  96.     public void onPageScrollStateChanged(int state) {
  97.         AnimationDrawable animation = (AnimationDrawable) iv_man.getBackground();
  98.         switch (state) {
  99.             case ViewPager.SCROLL_STATE_DRAGGING:
  100.                 animation.start();
  101.                 break;
  102.             case ViewPager.SCROLL_STATE_IDLE:
  103.                 animation.stop();
  104.                 break;
  105.             default:
  106.                 break;
  107.         }
  108.     }
  110.     public void setIv_man(ImageView iv_man) {
  111.         this.iv_man = iv_man;
  112.     }
  113. }

拦截系统处理xml

  1. public class ParallaxLayoutInflater extends LayoutInflater {
  3.     private static final String TAG = "ParallaxLayoutInflater";
  4.     private ParallaxFragment parallaxFragment;
  6.     protected ParallaxLayoutInflater(LayoutInflater original, Context newContext, ParallaxFragment parallaxFragment) {
  7.         super(original, newContext);
  8.         this.parallaxFragment = parallaxFragment;
  9.         //源代码中存在：
  10.         //View view;
  11.         //if (mFactory2 != null) {
  12.         //  view = mFactory2.onCreateView(parent, name, context, attrs);
  13.         //} else if (mFactory != null) {
  14.         //  view = mFactory.onCreateView(name, context, attrs);
  15.         //} else {
  16.         //  view = null;
  17.         //}
  18.         //if (view == null && mPrivateFactory != null) {
  19.         //  view = mPrivateFactory.onCreateView(parent, name, context, attrs);
  20.         //}
  21.         //也就是说只要实现Factory，那么就不会调用后面的方法
  22.         setFactory(new ParallaxFactory(this));
  23.     }
  25.     @Override
  26.     public LayoutInflater cloneInContext(Context newContext) {
  27.         //实际用于创建LayoutInflater的方法
  28.         return new ParallaxLayoutInflater(this, newContext, parallaxFragment);
  29.     }
  31.     //这个框架最核心的地方就是在这里设置Factory，从而进行拦截
  32. 	class ParallaxFactory implements LayoutInflater.Factory{
  34.         private LayoutInflater inflater;
  35.         //系统提供的视图分为android.widget.xxx和android.view.xxx
  36.         private final String[] prefixs = {
  37.                 "android.widget.",
  38.                 "android.view."
  39.         };
  41.         public ParallaxFactory(LayoutInflater inflater) {
  42.             this.inflater = inflater;
  43.         }
  45.         @Override
  46.         public View onCreateView(String name, Context context, AttributeSet attrs) {
  47.             //实例化view
  48.             View view = null;
  49.             if (view == null) {
  50. 				view = createViewOrFailQuietly(name,context,attrs);
  51.             }
  52.             if (view != null) {
  53.                 //获取自定义属性，并将自定义标签值绑定到view上面
  54.                 getCustomAttrs(context, attrs, view);
  55.                 parallaxFragment.getParallaxViews().add(view);
  56.             }
  57.             return view;
  58.         }
  60.         private void getCustomAttrs(Context context, AttributeSet attrs, View view) {
  61.             //所有自定义的属性
  62.             int[] attrIds = {
  63.                     R.attr.a_in,
  64.                     R.attr.a_out,
  65.                     R.attr.x_in,
  66.                     R.attr.x_out,
  67.                     R.attr.y_in,
  68.                     R.attr.y_out
  69.             };
  70. 			//获取
  71.             TypedArray typedArray = context.obtainStyledAttributes(attrs, attrIds);
  72.             if (typedArray != null && typedArray.length() > 0) {
  73. 				//获取自定义属性的值
  74.                 Log.d(TAG, "getCustomAttrs");
  75.                 ParallaxViewTag tag = new ParallaxViewTag();
  76.                 tag.alphaIn = typedArray.getFloat(0, 0f);
  77.                 tag.alphaOut = typedArray.getFloat(1, 0f);
  78.                 tag.xIn = typedArray.getFloat(2, 0f);
  79.                 tag.xOut = typedArray.getFloat(3, 0f);
  80.                 tag.yIn = typedArray.getFloat(4, 0f);
  81.                 tag.yOut = typedArray.getFloat(5, 0f);
  82.                 view.setTag(R.id.parallax_view_tag, tag);
  83.             }
  84.             typedArray.recycle();
  85.         }
  87.         private View createViewOrFailQuietly(String name, String prefix, Context context, AttributeSet attrs) {
  88.             try {
  89. 				//通过系统的inflater创建视图，读取系统的属性
  90.                 return inflater.createView(name, prefix, attrs);
  91.             } catch (ClassNotFoundException e) {
  92.                 e.printStackTrace();
  93.                 return null;
  94.             }
  95.         }
  97.         private View createViewOrFailQuietly(String name, Context context, AttributeSet attrs) {
  98.             //通过系统inflater创建视图
  99. 			//1.自定义控件标签名称带点，所以创建时不需要前缀
  100.             if (name.contains(".")) {
  101.                 return createViewOrFailQuietly(name, null, context, attrs);
  102.             }
  103. 			//2.系统视图需要加上前缀
  104. 			                for (String prefix : prefixs) {
  105.                     View view = createViewOrFailQuietly(name, prefix, context, attrs);
  106.                     if (view != null) {
  107.                         return view;
  108.                     }
  109.                 }
  110.             return null;
  111.         }
  112.     }
  113. }

参数控制

  1. //视差动画播放时参数的控制
  2. public class ParallaxViewTag {
  3.     protected int index;
  4.     protected float xIn;
  5.     protected float xOut;
  6.     protected float yIn;
  7.     protected float yOut;
  8.     protected float alphaIn;
  9.     protected float alphaOut;
  11.     @Override
  12.     public String toString() {
  13.         return "ParallaxViewTag [index=" + index + ", xIn=" + xIn + ", xOut=" + xOut + ", yIn=" + yIn
  14.                 + ", yOut=" + yOut + ", alphaIn=" + alphaIn + ", alphaOut=" + alphaOut + "]";
  15.     }
  16. }

同时完成人行走的帧动画

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:oneshot="false">
  4.     <item
  5.         android:drawable="@drawable/intro_item_manrun_1"
  6.         android:duration="200" />
  7.     <item
  8.         android:drawable="@drawable/intro_item_manrun_2"
  9.         android:duration="200" />
  10. </animation-list>

自定义属性

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <attr name="a_in" format="float" />
  4.     <attr name="a_out" format="float" />
  5.     <attr name="x_in" format="float" />
  6.     <attr name="x_out" format="float" />
  7.     <attr name="y_in" format="float" />
  8.     <attr name="y_out" format="float" />
  9. </resources>

ids

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <item name="parallax_pager" type="id"/>
  4.     <item name="parallax_view_tag" type="id"/>
  5. </resources>

实现效果如下图所示

高级UI-自定义动画框架的更多相关文章

  1. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  2. 高级UI晋升之自定义View实战（六）

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从Android 自定义属性动画&Camera动画来介绍自定义V ...

  3. 高级UI晋升之自定义View实战（五）

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从自定义View利器Canvas和Paint来进行详解 一.Canvas ...

  4. Android开发UI之自定义动画

    自定义动画,需要新建一个类,继承Animation类. 重写applyTransformation()方法和initialize()方法. applyTransformation(float inte ...

  5. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  6. 高级UI晋升之常用View（三）中篇

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从ViewPager来介绍常用View:文章目录 一.简介 二.基本使用 ...

  7. firefox 扩展开发笔记（三）:高级ui交互编程

    firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...

  8. Android 高级UI设计笔记07：RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  9. iOS 8自定义动画转场上手指南

    原文:http://www.cocoachina.com/ios/20150126/11011.html iOS 5发布的时候,苹果针对应用程序界面的设计,提出了一种全新的,革命性的方法—Storyb ...

随机推荐

  1. 【HTML】解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理 这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了... 以下部分来自handawei ...

  2. cube.js 学习（一）简单项目创建

    cube.js 是一个很不错的模块化分析框架,基于schema生成sql 同时内置可代码生成,可以快速的搞定 web 分析应用的开发 安装cli 工具 npm install -g cubejs-cl ...

  3. Codevs 3160 最长公共子串(后缀数组)

    3160 最长公共子串 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给出两个由小写字母组成的字符串,求它们的最长公共子串的长 ...

  4. 洛谷 P1842 奶牛玩杂技 题解

    P1842 奶牛玩杂技 题目背景 Farmer John 养了N(1<=N<=50,000)头牛,她们已经按1~N依次编上了号.FJ所不知道的是,他的所有牛都梦想着从农场逃走,去参加马戏团 ...

  5. 转载：Spark GraphX详解

    1.GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理框架,它是基于Spark平台提供对图计算和图挖掘简洁易用的而丰富的接口,极大的方便了对分布式图处理的需求. ...

  6. Loadrunner录制+运行+结果-【飞机订票系统实战】

    目录结构: 一.LoadRunner实现订票系统脚本录制 二.Loadrunner实现订票系统IP欺骗(此处可以不设置) 三.Loadrunner运行录制的脚本 四.Load generator配置 ...

  7. 13.mysql数据库

    1.mysql数据库建立           yum install mysql-server           mysql -u root                  mysqladmin ...

  8. input type color

    <input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ...

  9. 关于Delphi中二维数组的声明和大小调整

    这是一个实例: procedure TMainForm.Button1Click(Sender: TObject);var  arr:array of array of string;begin  s ...

  10. 后端小白的Bootstrap笔记 一

    栅格系统 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 120 ...