首先声明本人也是学生目前是实习生,不是技术大牛,只是分享一下自己写过的小Demo,望大家指点,共同进步,谢谢。
第一次写博客 不知道,从哪里入手,有点迷啊,我直接上代码和效果图了
效果图如下
首先我用到了约束布局,如果低版本的开发工具需要导入一个依赖(在Moudle:app)
compile 'com.android.support.constraint:constraint-layout:1.0.2'再然后是布局最外面是一个约束布局 android.support.constraint.ConstraintLayout
然后就是两个ImageView
<ImageView android:id="@+id/watch_record_ImageView_group" android:layout_width="50dp" android:layout_height="50dp" android:src="@mipmap/group" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <ImageView android:id="@+id/watch_record_ImageView_finger" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/finger" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginLeft="100dp" android:layout_marginTop="70dp"/>我们看下布局的效果图
手势和小白点都有了 接下来就要开始写动画了
我们在res目录下创建一个anim文件目录再创建一个xml文件(文件名自取) 然后写上两个动画效果 一个透明度动画,一个缩小放大的动画,代码如下
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 透明度动画--> <alpha android:duration="1000" android:fromAlpha="1.0" android:toAlpha="0.1"/> <!--缩小放大的动画--> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="0.5" android:toXScale="1.4" android:fromYScale="0.5" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="1000" /> <!--android:repeatCount="-1"--> </set>我在这里说下我理解的这些属性
android:duration="1000" 这个参数是动画的持续时间 默认为300 以毫秒为单位,想要动画效果快慢可改变次值 fromAlpha:透明度的起始值 toAlpha:透明度的结束值,我从1到0.1 就是让动画越来越淡 fromXScale:水平缩放起始值:0 toXScale:水平缩放结束值:1 fromYScale:竖直方向起始值 toYScale: 竖直方向结束值 pivotX:缩放轴点X pivotY:缩放轴点Y注:上面的动画只是小白点的动画,手势的动画我们将通过代码来实现
动画布局写完了 我们开始写Activity的代码了
public class WatchRecordActivity extends AppCompatActivity { ImageView watch_record_ImageView_finger, watch_record_ImageView_group; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.watch_record); // 找到图片ID 开始设置动画 setViews(); } private void setViews() { watch_record_ImageView_finger = (ImageView) findViewById(R.id.watch_record_ImageView_finger); watch_record_ImageView_group = (ImageView) findViewById(R.id.watch_record_ImageView_group); // 调用小白点动画 小白点在第一次进行先动 scaleAndAlphaAnimation(); } // 旋转动画 启动动画 private void RotateAnimation() { // 设置旋转动画参数 第一个是起始角度(15) 第二个结束角度原点(0) RotateAnimation rotate = new RotateAnimation(15, 0, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f); // 设置动画完成时间 毫秒为单位 rotate.setDuration(1500); // setRepeatCount为-1 是无限循环,因为这里要有先后顺序 所有不用 // rotate.setRepeatCount(-1); // 启动动画 watch_record_ImageView_finger.startAnimation(rotate); rotate.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { // 监听手势动画结束后显示小白点,启动小白点动画 // 相互循环调用,无限执行 watch_record_ImageView_group.setVisibility(View.VISIBLE); // 调用小白点动画 scaleAndAlphaAnimation(); } @Override public void onAnimationRepeat(Animation animation) { } }); } // 小白点动画(放大和透明度) private void scaleAndAlphaAnimation() { // 因为小白点动画有两个动作 一个放大 一个透明度,所有把参数写在了XML文件里 // 文件名watch_record_gestures_animation 在res目录anim目录下 Animation animation = AnimationUtils.loadAnimation(this, R.anim.watch_record_gestures_animation); animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { // 在小白点动画结束的方法里监听,小白点动画结束调用手势动画开始执行 // 隐藏小白点 watch_record_ImageView_group.setVisibility(View.INVISIBLE); // 启动手势动画 RotateAnimation(); } @Override public void onAnimationRepeat(Animation animation) { } }); // 启动动画 watch_record_ImageView_group.setAnimation(animation); } } 好了 一个简单的引导用户的点击动画就完成了,请大家多多关照,本人是新手上路。本文章为本人原创,博客ID 死在键盘上的程序猿 (ZWX原创)注:本Demo图片为公司资源,下载的源码里面没有图片,请另找图片,其他源码都有,请谅解
附上源码下载地址点击打开链接