當(dāng)前位置：首頁 > 运维知识 > Android >内容正文

Android

Android实现炫酷SVG动画效果

發(fā)布時間：2025/6/15 Android 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android实现炫酷SVG动画效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

svg是眼下十分流行的圖像文件格式了,svg嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，使用svg格式我們能夠直接用代碼來描畫圖像，能夠用不論什么文字處理工具打開svg圖像。通過改變部分代碼來使圖像具有交互功能，并能夠隨時插入到HTML中通過瀏覽器(如火狐瀏覽器)來觀看。使用svg格式可讓你設(shè)計激動人心的、高分辨率的Web圖形頁面。

svg格式具備眼下網(wǎng)絡(luò)流行的jpg和png等格式無法具備的優(yōu)勢：能夠隨意放大圖形顯示，但絕不會以犧牲圖像質(zhì)量為代價;可在svg圖像中保留可編輯和可搜尋的狀態(tài);平均來講，svg文件比其他格式的圖像文件要小非常多，因而下載也非常快。

我們先來看幾張Android上使用SVG的效果圖：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

從上面的圖片看到，假設(shè)我們自己來實(shí)現(xiàn)這種特效，很的麻煩，只是接下來給大家介紹一個開源控件，就能夠配合SVG實(shí)現(xiàn)這些效果。

首先我們來了解SVG文件的格式，舉個樣例：

使用最多的標(biāo)簽是path，也就是路徑

有的人也會想到，要實(shí)現(xiàn)照片上的動態(tài)效果。我們能夠使用Android自帶的畫圖類和函數(shù)，復(fù)雜的曲線路徑，我們能夠使用path這個類來制定

那會不會SVG里面的path，事實(shí)上也是這樣，那么我們就能夠?qū)VG中的path，相應(yīng)到android，然后繪制出來就好了。

SVG里面還有各種標(biāo)簽：

包含line直線，circle圓。rect矩形，eliipse橢圓。polygon多邊形，等等

這些僅僅要我們又一個SVG文件，都能夠?qū)⑵滢D(zhuǎn)換成java代碼

作為一個程序猿，我們當(dāng)然不能手動去做這個工作，那就涉及兩個問題，一個是SVG的解析，一個是解析后的繪制

幸運(yùn)的是，已經(jīng)有人完畢了這個工作。而且在Github上開源?https://github.com/geftimov/android-pathview

這篇文章將作為一個簡單的樣例，來使用上面的開源控件

為了解析SVG,我們須要將一個androidsvg.jar包括進(jìn)我們的lib

以下我們來看這個控件的簡單使用。作為一個自己定義控件，我們僅僅須要在布局文件中面加入

<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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.PathViewxmlns: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>
事實(shí)上app:svg指定了一個SVG文件，我們能夠把這個文章放在raw文件夾以下

然后來看Activity里面：

public class MainActivity extends FragmentActivity {@Overrideprotected 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() {@Overridepublic 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;}}
看到凝視的部分，調(diào)用了makeConvexArraw()方法，假設(shè)我們沒有在xml文件中面指定svg文件。我們也能夠在代碼中手動指定繪制的路徑

讓代碼跑起來，點(diǎn)擊屏幕。于是就實(shí)現(xiàn)了下面效果：

就是這么簡單。至于這么制作SVG文件，大家能夠找美工幫忙，使用ps和ai,能夠?qū)D片轉(zhuǎn)換成SVG

最后是源代碼下載地址：http://download.csdn.net/detail/kangaroo835127729/9016349

整個過程有兩個類，一個是SVG解析工具類：

/*** Util class to init and get paths from svg.*/ public class SvgUtils {/*** It is for logging purposes.*/private static final String LOG_TAG = "SVGUtils";/*** All the paths with their attributes from the svg.*/private final List<SvgPath> mPaths = new ArrayList<SvgPath>();/*** The paint provided from the view.*/private final Paint mSourcePaint;/*** The init svg.*/private SVG mSvg;/*** Init the SVGUtils with a paint for coloring.** @param sourcePaint - the paint for the coloring.*/public SvgUtils(final Paint sourcePaint) {mSourcePaint = sourcePaint;}/*** Loading the svg from the resources.** @param context Context object to get the resources.* @param svgResource int resource id of the svg.*/public void load(Context context, int svgResource) {if (mSvg != null) return;try {mSvg = SVG.getFromResource(context, svgResource);mSvg.setDocumentPreserveAspectRatio(PreserveAspectRatio.UNSCALED);} catch (SVGParseException e) {Log.e(LOG_TAG, "Could not load specified SVG resource", e);}}/*** Draw the svg to the canvas.** @param canvas The canvas to be drawn.* @param width The width of the canvas.* @param height The height of the canvas.*/public void drawSvgAfter(final Canvas canvas, final int width, final int height) {final float strokeWidth = mSourcePaint.getStrokeWidth();rescaleCanvas(width, height, strokeWidth, canvas);}/*** Render the svg to canvas and catch all the paths while rendering.** @param width - the width to scale down the view to,* @param height - the height to scale down the view to,* @return All the paths from the svg.*/public List<SvgPath> getPathsForViewport(final int width, final int height) {final float strokeWidth = mSourcePaint.getStrokeWidth();Canvas canvas = new Canvas() {private final Matrix mMatrix = new Matrix();@Overridepublic int getWidth() {return width;}@Overridepublic int getHeight() {return height;}@Overridepublic void drawPath(Path path, Paint paint) {Path dst = new Path();//noinspection deprecationgetMatrix(mMatrix);path.transform(mMatrix, dst);paint.setAntiAlias(true);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(strokeWidth);mPaths.add(new SvgPath(dst, paint));}};rescaleCanvas(width, height, strokeWidth, canvas);return mPaths;}/*** Rescale the canvas with specific width and height.** @param width The width of the canvas.* @param height The height of the canvas.* @param strokeWidth Width of the path to add to scaling.* @param canvas The canvas to be drawn.*/private void rescaleCanvas(int width, int height, float strokeWidth, Canvas canvas) {final RectF viewBox = mSvg.getDocumentViewBox();final float scale = Math.min(width/ (viewBox.width() + strokeWidth),height / (viewBox.height() + strokeWidth));canvas.translate((width - viewBox.width() * scale) / 2.0f,(height - viewBox.height() * scale) / 2.0f);canvas.scale(scale, scale);mSvg.renderToCanvas(canvas);}/*** Path with bounds for scalling , length and paint.*/public static class SvgPath {/*** Region of the path.*/private static final Region REGION = new Region();/*** This is done for clipping the bounds of the path.*/private static final Region MAX_CLIP =new Region(Integer.MIN_VALUE, Integer.MIN_VALUE,Integer.MAX_VALUE, Integer.MAX_VALUE);/*** The path itself.*/final Path path;/*** The paint to be drawn later.*/final Paint paint;/*** The length of the path.*/final float length;/*** The bounds of the path.*/final Rect bounds;/*** The measure of the path, we can use it later to get segment of it.*/final PathMeasure measure;/*** Constructor to add the path and the paint.** @param path The path that comes from the rendered svg.* @param paint The result paint.*/SvgPath(Path path, Paint paint) {this.path = path;this.paint = paint;measure = new PathMeasure(path, false);this.length = measure.getLength();REGION.setPath(path, MAX_CLIP);bounds = REGION.getBounds();}} }
一個是SVG控件類：

/*** 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.*/private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);/*** Utils to catch the paths from the svg.*/private final SvgUtils svgUtils = new SvgUtils(paint);/*** All the paths provided to the view. Both from Path and Svg.*/private List<SvgUtils.SvgPath> paths = new ArrayList<SvgUtils.SvgPath>(0);/*** This is a lock before the view is redrawn* or resided it must be synchronized with this object.*/private final Object mSvgLock = new Object();/*** Thread for working with the object above.*/private Thread mLoader;/*** The svg image from the raw directory.*/private int svgResourceId;/*** Object that build the animation for the path.*/private AnimatorBuilder animatorBuilder;/*** The progress of the drawing.*/private float progress = 0f;/*** If the used colors are from the svg or from the set color.*/private boolean naturalColors;/*** If the view is filled with its natural colors after path drawing.*/private boolean fillAfter;/*** The width of the view.*/private int width;/*** The height of the view.*/private int height;/*** Default constructor.** @param context The Context of the application.*/public PathView(Context context) {this(context, null);}/*** Default constructor.** @param context The Context of the application.* @param attrs attributes provided from the resources.*/public PathView(Context context, AttributeSet attrs) {this(context, attrs, 0);}/*** Default constructor.** @param context The Context of the application.* @param attrs attributes provided from the resources.* @param defStyle Default style.*/public PathView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);paint.setStyle(Paint.Style.STROKE);getFromAttributes(context, attrs);}/*** Get all the fields from the attributes .** @param context The Context of the application.* @param attrs attributes provided from the resources.*/private void getFromAttributes(Context context, AttributeSet attrs) {final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PathView);try {if (a != null) {paint.setColor(a.getColor(R.styleable.PathView_pathColor, 0xff00ff00));paint.setStrokeWidth(a.getFloat(R.styleable.PathView_pathWidth, 8.0f));svgResourceId = a.getResourceId(R.styleable.PathView_svg, 0);}} finally {if (a != null) {a.recycle();}}}/*** Set paths to be drawn and animated.** @param paths - Paths that can be drawn.*/public void setPaths(final List<Path> paths) {for (Path path : paths) {this.paths.add(new SvgUtils.SvgPath(path, paint));}synchronized (mSvgLock) {updatePathsPhaseLocked();}}/*** Set path to be drawn and animated.** @param path - Paths that can be drawn.*/public void setPath(final Path path) {paths.add(new SvgUtils.SvgPath(path, paint));synchronized (mSvgLock) {updatePathsPhaseLocked();}}/*** Animate this property. It is the percentage of the path that is drawn.* It must be [0,1].** @param percentage float the percentage of the path.*/public void setPercentage(float percentage) {if (percentage < 0.0f || percentage > 1.0f) {throw new IllegalArgumentException("setPercentage not between 0.0f and 1.0f");}progress = percentage;synchronized (mSvgLock) {updatePathsPhaseLocked();}invalidate();}/*** This refreshes the paths before draw and resize.*/private void updatePathsPhaseLocked() {final int count = paths.size();for (int i = 0; i < count; i++) {SvgUtils.SvgPath svgPath = paths.get(i);svgPath.path.reset();svgPath.measure.getSegment(0.0f, svgPath.length * progress, svgPath.path, true);// Required only for Android 4.4 and earliersvgPath.path.rLineTo(0.0f, 0.0f);}}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);synchronized (mSvgLock) {canvas.save();canvas.translate(getPaddingLeft(), getPaddingTop());final int count = paths.size();for (int i = 0; i < count; i++) {final SvgUtils.SvgPath svgPath = paths.get(i);final Path path = svgPath.path;final Paint paint1 = naturalColors ?

svgPath.paint : paint; canvas.drawPath(path, paint1); } fillAfter(canvas); canvas.restore(); } } /** * If there is svg , the user called setFillAfter(true) and the progress is finished. * * @param canvas Draw to this canvas. */ private void fillAfter(final Canvas canvas) { if (svgResourceId != 0 && fillAfter && progress == 1f) { svgUtils.drawSvgAfter(canvas, width, height); } } @Override protected void onSizeChanged(final int w, final int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (mLoader != null) { try { mLoader.join(); } catch (InterruptedException e) { Log.e(LOG_TAG, "Unexpected error", e); } } if (svgResourceId != 0) { mLoader = new Thread(new Runnable() { @Override public void run() { svgUtils.load(getContext(), svgResourceId); synchronized (mSvgLock) { width = w - getPaddingLeft() - getPaddingRight(); height = h - getPaddingTop() - getPaddingBottom(); paths = svgUtils.getPathsForViewport(width, height); updatePathsPhaseLocked(); } } }, "SVG Loader"); mLoader.start(); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (svgResourceId != 0) { int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); setMeasuredDimension(widthSize, heightSize); return; } int desiredWidth = 0; int desiredHeight = 0; final float strokeWidth = paint.getStrokeWidth() / 2; for (SvgUtils.SvgPath path : paths) { desiredWidth += path.bounds.left + path.bounds.width() + strokeWidth; desiredHeight += path.bounds.top + path.bounds.height() + strokeWidth; } int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(widthMeasureSpec); int measuredWidth, measuredHeight; if (widthMode == MeasureSpec.AT_MOST) { measuredWidth = desiredWidth; } else { measuredWidth = widthSize; } if (heightMode == MeasureSpec.AT_MOST) { measuredHeight = desiredHeight; } else { measuredHeight = heightSize; } setMeasuredDimension(measuredWidth, measuredHeight); } /** * If the real svg need to be drawn after the path animation. * * @param fillAfter - boolean if the view needs to be filled after path animation. */ public void setFillAfter(final boolean fillAfter) { this.fillAfter = fillAfter; } /** * If you want to use the colors from the svg. */ public void useNaturalColors() { naturalColors = true; } /** * Animator for the paths of the view. * * @return The AnimatorBuilder to build the animation. */ public AnimatorBuilder getPathAnimator() { if (animatorBuilder == null) { animatorBuilder = new AnimatorBuilder(this); } return animatorBuilder; } /** * Get the path color. * * @return The color of the paint. */ public int getPathColor() { return paint.getColor(); } /** * Set the path color. * * @param color -The color to set to the paint. */ public void setPathColor(final int color) { paint.setColor(color); } /** * Get the path width. * * @return The width of the paint. */ public float getPathWidth() { return paint.getStrokeWidth(); } /** * Set the path width. * * @param width - The width of the path. */ public void setPathWidth(final float width) { paint.setStrokeWidth(width); } /** * Get the svg resource id. * * @return The svg raw resource id. */ public int getSvgResource() { return svgResourceId; } /** * Set the svg resource id. * * @param svgResource - The resource id of the raw svg. */ public void setSvgResource(int svgResource) { svgResourceId = svgResource; } /** * Object for building the animation of the path of this view. */ public static class AnimatorBuilder { /** * Duration of the animation. */ private int duration = 350; /** * Interpolator for the time of the animation. */ private Interpolator interpolator; /** * The delay before the animation. */ private int delay = 0; /** * ObjectAnimator that constructs the animation. */ private final ObjectAnimator anim; /** * Listener called before the animation. */ private ListenerStart listenerStart; /** * Listener after the animation. */ private ListenerEnd animationEnd; /** * Animation listener. */ private PathViewAnimatorListener pathViewAnimatorListener; /** * Default constructor. * * @param pathView The view that must be animated. */ public AnimatorBuilder(final PathView pathView) { anim = ObjectAnimator.ofFloat(pathView, "percentage", 0.0f, 1.0f); } /** * Set the duration of the animation. * * @param duration - The duration of the animation. * @return AnimatorBuilder. */ public AnimatorBuilder duration(final int duration) { this.duration = duration; return this; } /** * Set the Interpolator. * * @param interpolator - Interpolator. * @return AnimatorBuilder. */ public AnimatorBuilder interpolator(final Interpolator interpolator) { this.interpolator = interpolator; return this; } /** * The delay before the animation. * * @param delay - int the delay * @return AnimatorBuilder. */ public AnimatorBuilder delay(final int delay) { this.delay = delay; return this; } /** * Set a listener before the start of the animation. * * @param listenerStart an interface called before the animation * @return AnimatorBuilder. */ public AnimatorBuilder listenerStart(final ListenerStart listenerStart) { this.listenerStart = listenerStart; if (pathViewAnimatorListener == null) { pathViewAnimatorListener = new PathViewAnimatorListener(); anim.addListener(pathViewAnimatorListener); } return this; } /** * Set a listener after of the animation. * * @param animationEnd an interface called after the animation * @return AnimatorBuilder. */ public AnimatorBuilder listenerEnd(final ListenerEnd animationEnd) { this.animationEnd = animationEnd; if (pathViewAnimatorListener == null) { pathViewAnimatorListener = new PathViewAnimatorListener(); anim.addListener(pathViewAnimatorListener); } return this; } /** * Starts the animation. */ public void start() { anim.setDuration(duration); anim.setInterpolator(interpolator); anim.setStartDelay(delay); anim.start(); } /** * Animation listener to be able to provide callbacks for the caller. */ private class PathViewAnimatorListener implements Animator.AnimatorListener { @Override public void onAnimationStart(Animator animation) { if (listenerStart != null) listenerStart.onAnimationStart(); } @Override public void onAnimationEnd(Animator animation) { if (animationEnd != null) animationEnd.onAnimationEnd(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } } /** * Called when the animation start. */ public interface ListenerStart { /** * Called when the path animation start. */ void onAnimationStart(); } /** * Called when the animation end. */ public interface ListenerEnd { /** * Called when the path animation end. */ void onAnimationEnd(); } } }

總結(jié)

以上是生活随笔為你收集整理的Android实现炫酷SVG动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： zTree新增的根结点再新增子节点reA
下一篇：编程马拉松大赛试题及代码（C++实现）