注意：这篇博客重在为大家提供学习vectorDrawable实习动画的基础知识，但是想要实现更加炫酷的效果就要读者自己去深究了
github链接：https://github.com/93Laer/PathAnimtor/blob/master/README.md
先展示一下效果图
登录界面的vectorDrawable
现在看上去还是没一点鸟用哈，也没什么特点，再看看代码吧
麻痹，更难过了
来看看没用的鸟图实现的炫酷效果吧
登录界面的vectorDrawable的gif
感觉还是不错呀
注：网上有太多关于这种动画的炫酷效果了，我这里只展示了我自己实现的一个小动画，有兴趣可以自己搜来看
分析这个动画的步骤:
- 当输入账户名的编辑框获得焦点时显示上面那条横线动画
- 当输入的账户名正确时显示一个提示正确的方法
- 当下面输入框获得焦点时显示第二条横线
- 当输入账户名的编辑框将账户名改错了时加载收起正确符号的动画
- 当前焦点在下面的输入框，当再次点击上面的输入框，上面获得焦点时，加载返回到上一条的过度动画
另外还有当账户名输入正确或是失败时，两个输入框获得焦点时的过渡动画，这里我就不罗列了
首先定义动画吧(没有加default的都是动画显示,请自动忽略命名,也勿喷，第一次都是这样)
- default_show
- default_gone
- anim3_first_line_gone
- anim3_back_circle_buttom
- anim3_back_buttom_circle
- anim3_back_first_line
- anim_show
- default_show
- anim2_circletop_show
- anim2_show_true
- anim3_circle_buttom_show
- anim3_second_line_show
- anim_no_pass_true
- anim_no_pass_circle
在Drawable下新建
- anim1
- anim2
- anim3
- anim3_back1
- anim3_back1_no_pass
- anim3_no_pass
- anim_judge
- 界面布局
- activity的逻辑处理
public class LoginActivity extends AppCompatActivity implements View.OnFocusChangeListener, TextWatcher {
private ImageView img1;
private EditText edit1;
private EditText edit2;
private AnimatedVectorDrawable anim1;
private AnimatedVectorDrawable anim2;
private AnimatedVectorDrawable anim3;
private AnimatedVectorDrawable anim3_back1;
private AnimatedVectorDrawable anim_judge;
private AnimatedVectorDrawable anim3_back1_no_pass;
private AnimatedVectorDrawable anim3_no_pass;
private boolean isGoBack;
private boolean isShowTrue;
private boolean isPass;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
img1 = ((ImageView) findViewById(R.id.img1));
edit1 = ((EditText) findViewById(R.id.edit1));
edit2 = ((EditText) findViewById(R.id.edit2));
anim1 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim1);
anim2 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim2);
anim3 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3);
anim3_back1 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3_back1);
anim3_back1_no_pass = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3_back1_no_pass);
anim3_no_pass = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3_no_pass);
anim_judge = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim_judge);
// 设置焦点变化的监听
edit1.setOnFocusChangeListener(this);
edit2.setOnFocusChangeListener(this);
// 文本变化的监听
edit1.addTextChangedListener(this);
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
switch (v.getId()) {
case R.id.edit1:
if (hasFocus) {
if (isGoBack) {
if (isPass) {
isGoBack = false;
img1.setImageDrawable(anim3_back1);
anim3_back1.start();
} else {
isGoBack = false;
img1.setImageDrawable(anim3_back1_no_pass);
anim3_back1_no_pass.start();
}
} else {
img1.setImageDrawable(anim1);
anim1.start();
}
}
break;
case R.id.edit2:
if (hasFocus) {
isGoBack = true;
if (isPass){
img1.setImageDrawable(anim3);
anim3.start();
}else {
img1.setImageDrawable(anim3_no_pass);
anim3_no_pass.start();
}
}
break;
}
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
if (!TextUtils.isEmpty(editable) && edit1.getText().toString().equals("123")) {
isPass = true;
img1.setImageDrawable(anim2);
anim2.start();
isShowTrue = true;
} else if (isShowTrue) {
isPass = false;
img1.setImageDrawable(anim_judge);
anim_judge.start();
isShowTrue = false;
}
}
}
顺便讲讲trimPathEnd和trimPathStart 的区别，很简单，不懂的，自己测试一下
- trimPathEnd：
指的是从开始绘制的地方到剪切结束的地方 - trimPathStart
指的是从开始剪切的地方到最后
参考链接
http://mp.weixin.qq.com/s__biz=MzAxNzMxNzk5OQ==&mid=2649484518&idx=1&sn=6f36f9836ff2c740b77514a3457a21b8&scene=0#wechat_redirect
http://www.jianshu.com/p/7d7178a0feca