package com.loaderman.customviewdemo;

import android.graphics.drawable.Animatable;
import android.os.Bundle;
import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.view.View;
import android.widget.ImageView; public class MainActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ImageView imageView = (ImageView) findViewById(R.id.anim_img);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(
MainActivity.this, R.drawable.line_animated_vector
);
imageView.setImageDrawable(animatedVectorDrawableCompat);
((Animatable) imageView.getDrawable()).start();
}
}); } }
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/btn"
android:text="开始动画"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="@+id/anim_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/svg_line"/>
</LinearLayout>

line_animated_vector.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/svg_line"> <target
android:name="bar"
android:animation="@animator/anim_trim_start"
/>
</animated-vector>

anim_trim_start.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathStart"
android:valueFrom="0"
android:valueTo="1"
android:duration="2000"/>

效果:


package com.loaderman.customviewdemo;

import android.graphics.drawable.Animatable;
import android.os.Bundle;
import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView; public class MainActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView imageView = (ImageView) findViewById(R.id.anim_img); //将焦点放在ImageView上
imageView.setFocusable(true);
imageView.setFocusableInTouchMode(true);
imageView.requestFocus();
imageView.requestFocusFromTouch();
EditText editText = (EditText)findViewById(R.id.edit); //当EditText获得焦点时开始动画
editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus){ AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(
MainActivity.this, R.drawable.animated_vecotr_search
);
imageView.setImageDrawable(animatedVectorDrawableCompat);
((Animatable) imageView.getDrawable()).start();
}
}
}); } }

animated_vecotr_search.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector_search_bar" >
<target
android:animation="@animator/anim_search_trim_end"
android:name="search"/>
<target
android:animation="@animator/anim_bar_trim_start"
android:name="bar"/>
</animated-vector>

vector_search_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="150dp"
android:height="24dp"
android:viewportWidth="150"
android:viewportHeight="24"> <!--搜索条-->
<path
android:name="search"
android:pathData="M141,17 A9,9 0 1,1 142,16 L149,23"
android:strokeWidth="2"
android:strokeColor="@android:color/darker_gray"/> <!--底部横线-->
<path
android:name="bar"
android:trimPathStart="1"
android:pathData="M0,23 L149,23"
android:strokeWidth="2"
android:strokeColor="@android:color/darker_gray"/>
</vector>

anim_search_trim_end.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<EditText
android:id="@+id/edit"
android:hint="点击输入"
android:layout_width="150dp"
android:layout_height="24dp"
android:background="@null"/>
<ImageView
android:id="@+id/anim_img"
android:layout_width="150dp"
android:layout_height="24dp"
/>
</FrameLayout>

效果:

SVG动画示例的更多相关文章

  1. Walkway.js – 用线条制作简约的 SVG 动画

    Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...

  2. HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  3. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

  4. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  5. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  6. 带给你灵感:30个超棒的 SVG 动画展示【上篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助SVG,我们有更多 ...

  7. 带给你灵感:30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  8. SVG动画实践篇-模拟音量高低效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...

  9. 借助Bodymovin播放svg动画

    svg动画,截取工具有点不忍直视了~~~ 为了实现上面的svg动画,可以使用bodymovin插件,简单配置之后,就可以直接可以实现在 AE(可视化操作,不用码代码)上面导出 svg的json数据,在 ...

随机推荐

  1. 【OF框架】定义框架标准WebApi,按照规范返回状态信息及数据信息

    准备 了解框架基本应用,已经完成Controller创建. 一.定义框架标准WebApi 一个标准的WebApi,包含预定义的入参和回参类型 入参为CallParams,需要增加FromBody声明, ...

  2. redis windows安装与liunx安装

    windows安装redis 2.把安装包放在Linux文件系统下,利用WinSCP工具 3.解压缩 tar -zxf redis-4.0.2.tar.gz 4.切换到解压后的目录 cd redis- ...

  3. C#开发Office程序

    标题:Office 解决方案开发概述 (VSTO) 地址:https://docs.microsoft.com/zh-cn/visualstudio/vsto/office-solutions-dev ...

  4. Go 逃逸分析

    Go 逃逸分析 堆和栈 要理解什么是逃逸分析会涉及堆和栈的一些基本知识,如果忘记的同学我们可以简单的回顾一下: 堆(Heap):一般来讲是人为手动进行管理,手动申请.分配.释放.堆适合不可预知大小的内 ...

  5. 某网站的videojs的配置及操作

    某网站的videojs的配置及操作 一.总结 一句话总结: 多参照参照别人的例子就好,省事 1.videojs如何获取用户当前视频的位置? this.currentTime() 2.回到视频开始处? ...

  6. 23 export default和export的使用方式

    在Node中 使用 var 名称 = require('模块标识符') module.export 和exports来暴露成员 //这是 Node中向外暴露成员的形式: module.exports= ...

  7. 通过trace分析优化器如何选择执行计划

    1. mysql> show variables like "optimizer_trace%"\G;*************************** 1. row * ...

  8. canvas小球动画

    绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...

  9. npm命令Error: EINVAL: invalid argument, mkdir

    错误原因:在node.js的安装目录下创建两个文件夹,node_cache和node_global,然后命令行设置: npm config set cache "D:\nodejs\node ...

  10. Spring 对事务的整合

    对事务的复习 什么是事务: 事务(TRANSACTION) 是作为单个逻辑工作单元执行的一系列操作. 多个操作作为一个整体向系统提交,要么都执行,要么都不执行. 事务是一个不可分割的逻辑单元. 事务的 ...