`

PathView实现炫酷SVG动画

阅读更多

解析SVG,需要将一个androidsvg.jar包含进libs

https://github.com/geftimov/android-pathview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#ff0000"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
    <com.example.kaiyicky.myapplication.PathView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/pathView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:pathColor="@android:color/white"
        app:svg="@raw/ironman_white"
        app:pathWidth="5"/>
</LinearLayout>

app:svg指定了一个SVG文件,我们可以把这个文章放在raw目录下面

public class MainActivity extends FragmentActivity {
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        final PathView pathView = (PathView) findViewById(R.id.pathView);
//        final Path path = makeConvexArrow(50, 100);
//        pathView.setPath(path);
        pathView.setFillAfter(true);
        pathView.useNaturalColors();
        pathView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pathView.getPathAnimator().
                        delay(100).
                        duration(1500).
                        interpolator(new AccelerateDecelerateInterpolator()).
                        start();
            }
        });
    }
 
    private Path makeConvexArrow(float length, float height) {
        final Path path = new Path();
        path.moveTo(0.0f, 0.0f);
        path.lineTo(length / 4f, 0.0f);
        path.lineTo(length, height / 2.0f);
        path.lineTo(length / 4f, height);
        path.lineTo(0.0f, height);
        path.lineTo(length * 3f / 4f, height / 2f);
        path.lineTo(0.0f, 0.0f);
        path.close();
        return path;
    }
 
}

看到注释的部分,调用了makeConvexArraw()方法,如果我们没有在xml文件里面指定svg文件,我们也可以在代码中手动指定绘制的路径

至于这么制作SVG文件,大家可以找美工帮忙,使用ps和ai,可以将图片转换成SVG
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0825/3362.html
分享到:
评论

相关推荐

    Android SVG动画PathView源码解析与使用教程(API 14)

    3. **动画实现**:PathView通过监听属性动画库(Property Animation)的变化,动态改变Path对象中的节点坐标,从而实现动画效果。这通常涉及到`ValueAnimator`和`AnimatorUpdateListener`,在每次动画更新时,计算新...

    基于qml的pathview实现的滑动选单项目源码.zip

    基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动...

    安卓动画效果相关-android-pathview路径动画库.rar

    PathView的核心概念是基于SVG(Scalable Vector Graphics)路径来实现动画。SVG是一种基于XML的矢量图像格式,它可以描述出复杂的线条、曲线和形状,并且可以在不同分辨率的设备上保持清晰。在Android中,PathView将...

    QML实现酷炫的 Cover Flow 图片轮播效果(PathView)

    实现Cover Flow的关键组件是`PathView`,它是Qt Quick Controls 2中的一种视图类型,允许沿着指定路径显示一组项目。`PathView`可以创建各种动画效果,包括我们想要的Cover Flow效果。让我们逐步了解如何设置它: 1...

    android PathView

    PathView可以配合ValueAnimator或ObjectAnimator实现路径动画。通过改变PathData的值,可以实现路径的平滑移动、缩放、旋转等动画效果,为用户带来更丰富的交互体验。 6. **属性绑定** 使用Data Binding库,...

    SVGPathView

    * PathView is an View that animate paths. */ public class PathView extends View { /** * Logging tag. */ public static final String LOG_TAG = "PathView"; /** * The paint for the path. */ ...

    qml时间滚筒控件-使用PathView来实现

    qml时间滚筒控件,使用PathView来实现

    PathView.zip

    PathView.zip是一个包含Android动画效果实现的压缩包,主要用于创建类似BiliBili客户端聊天弹幕室中的线条动画。在BiliBili这样的视频分享平台上,弹幕是用户互动的重要方式,而线条动画则能够生动地展示这些弹幕在...

    qmlpathview:基于QML PathView实现的一些效果

    qmlpathview基于QML PathView实现的一些效果====================================== 这是QML实现的一个pathview示例,它是完全跨平台的,运行在Linux、OS X和Windows上。 它还可以在 iOS、Android、Wphone、Ubutun ...

    QML之pathview

    QML之PathView示例,

    基于PathView,Qt/QML做的一个可以无限滚动的日历控件

    基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的...

    Android-android-pathview.zip

    Android-android-pathview.zip,android视图,既有来自构造路径的路径,也有来自svg的路径。,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性...

    基于QML2.0的View之PathView

    继QML2.0TabView之后,打算简单说下PathView这个QML视图,最近找到先前研究的项目,但是对于PathView这个在qml2.0里面继续出现的旧东西,感觉好熟悉,看看qml2.0是否新增了一些特性或者修复了哪些bug,遂研究了下

    PathView.git_java_might9fv_android_

    PathView可能还利用了Android的属性动画系统,这使得开发者可以平滑地改变PathView的某些属性,如路径的形状、颜色或动画效果,从而创造出动态的视觉体验。Android的`ObjectAnimator`或`ValueAnimator`类常用于此类...

    Android快速SDK(11)圆弧菜单库PathView【傻瓜模式】

    在Android开发中,为了提升用户体验和界面的美观性,开发者经常需要实现各种创新的交互设计。其中,圆弧菜单库就是一个吸引用户注意力的组件。本文将深入探讨Android快速SDK中的圆弧菜单库——PathView,它能帮助...

    QML path view 示例

    通过打开和分析这些文件,你可以看到具体的PathView实现细节,包括Path的复杂形状、Delegate的自定义样式以及可能的交互功能。 Path View的其他高级特性还包括动画效果,如平滑滚动、自动调整速度以适应路径的曲率...

Global site tag (gtag.js) - Google Analytics