分享下android中路径动画svg格式的（一）

http://blog.163.com/www_iloveyou_com/blog/static/2116583722015717442912/

分享下android中路径动画svg格式的（一）  

2015-08-01 19:28:05|  分类： Android技术|举报|字号 订阅

       

  下载LOFTER 我的照片书  |

1，下载生成svg格式的工具Adobe Illustrator CS5，下载地址： http://pan.baidu.com/s/1hqkz9cg

在线svg格式编辑的地址： http://editor.method.ac/

20 个有用的 SVG 工具，提供更好的图像处理:http://www.oschina.net/translate/20-useful-svg-tools-for-better-graphics

2，引用github上的库： https://github.com/geftimov/android-pathview，demo下载地址：http://pan.baidu.com/s/1i3o1qRj

3，开发工具使用android studio

效果图：

4，使用方法直接看代码：

public class MainActivity extends ActionBarActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager);
      final ScreenSlidePagerAdapter screenSlidePagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
      viewpager.setAdapter(screenSlidePagerAdapter);
      viewpager.setPageTransformer(true, new CustomTransformer());
   }

   private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
      public ScreenSlidePagerAdapter(FragmentManager fm) {
         super(fm);
      }

      @Override
      public Fragment getItem(int position) {
         if (position == 0) {
            return new IssuesFragment();
         }
         if (position == 1) {
            return new IssuesFragment();
         }
         if (position == 2) {
            return new LogoutFragment();
         }
         return new SettingsFragment();
      }

      @Override
      public int getCount() {
         return 2;
      }
   }

   private class CustomTransformer implements ViewPager.PageTransformer {


      @Override
      public void transformPage(View page, float position) {
         if (position < -1 || position > 1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            page.setAlpha(0);
            return;
         }
         final float abs = 1 - Math.abs(position);
         final PathView pathView = (PathView) page.findViewById(R.id.pathView);
         pathView.setPercentage(abs);
      }
   }

}

public class IssuesFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.fragment_issues, container, false);
        final PathView pathView = (PathView) inflate.findViewById(R.id.pathView);
        pathView.getPathAnimator().
                delay(100).
                duration(1500).
                interpolator(new AccelerateDecelerateInterpolator()).
                start();
        pathView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pathView.getPathAnimator().
                        delay(100).
                        duration(1500).
                        interpolator(new AccelerateDecelerateInterpolator()).
                        start();
            }
        });
        return inflate;
    }
}

xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <android.support.v4.view.ViewPager android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:gravity="center"
              android:layout_height="match_parent">

    <com.eftimoff.androipathview.PathView
        android:id="@+id/pathView"
        android:layout_width="match_parent"
        app:pathColor="@android:color/holo_red_dark"
        app:pathWidth="3"
        app:svg="@raw/test"
        android:layout_height="match_parent"/>

</LinearLayout>

5，最后写下生成文字path的简单操作：

①，打开Adobe Illustrator CS5,新建文件，选择文字直接写文字

②，使用选择工具选中文字，执行工具栏中文字--》创建轮廓

③，执行工具栏中效果--》路径查找器--》轮廓

④，保存为svg格式就行，然后添加到android工程中就可以直接使用了