专栏首页阿策小和尚Android 基础动画之 scale 渐变缩放

Android 基础动画之 scale 渐变缩放

和尚最近在学习 ViewPager 的小动画,说来惭愧,工作这么久了一直没有认真了解过动画这部分,今天特意学习一下 Android 的基本动画。

Android 的基本的动画包括 alpha(透明度)/ scale(缩放)/ translate(位移) / rotate(旋转)四种,和尚今天学习一下 scale 渐变缩放动画效果。

Activity 绑定动画事件:

mBtn1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mV1.startAnimation(AnimationUtils.loadAnimation(AnimActivity.this, R.anim.anim_scale));
    }
});

layout.xml 显示动画效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="开始动画" />

  <View
      android:id="@+id/anim_v1"
      android:layout_width="300dp"
      android:layout_height="150dp"
      android:layout_gravity="center"
      android:background="@color/colorAccent" />
</LinearLayout>

anim.xml 设置动画属性

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3500"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="100%p"
    android:pivotY="100%p"
    android:toXScale="1.0"
    android:toYScale="1.0" />

代码很简单,和尚接下来逐条学习一下 anim_scale 中各条属性:

1. android:duration="3500"

duration 代表动画过程中持续时常;

2. android:fromXScale="0.0"

fromXScale 代表初始时横向 View 比例,0.0为从没有开始动画,1.0即 View 原尺寸,2.0即 View 原尺寸两倍;建议与 toXScale 共同使用;

3. android:fromYScale="0.0"

fromYScale 为初始时纵向 View 比例,与 fromXScale 使用相同;

4. android:toXScale="1.0"

toXScale 代表动画过程中横向变化尺寸比例,一般与 fromXScale 共同使用;

5. android:toYScale="1.0"

toYScale 代表动画过程中纵向变化尺寸比例,一般与 fromYScale 共同使用;

6. android:pivotX="100%p" android:pivotY="100%p"

pivotXpivotY 是和尚重点学习的地方,和尚理解为动画起点坐标,可以为整数值、百分数(或者小数)、百分数p 三种样式。

  1. 整数值:android:pivotX="100"

整数值类型是相对于自身 View 来定义,以自身 View 左上角的点为原点,水平向右为正,竖直向下为正的坐标系中计算,设置的整数值为 px,为固定值。

  1. 百分数/小数:android:pivotX="100%"

百分数/小数类型是相对于自身 View 来定义,与整数值类似,只是坐标点是以自身 View 尺寸比例来计算而非固定值。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="开始动画" />
  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
      <View
          android:id="@+id/anim_v1"
          android:layout_width="300dp"
          android:layout_height="150dp"
          android:layout_gravity="center"
          android:background="@color/colorAccent" />
    </FrameLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginRight="150dp"
        android:background="@android:color/background_dark" />
  </FrameLayout>
</LinearLayout>
  1. 百分数 + p

这种方式是最特殊的,和尚理解为自身 View 与相对于某个父容器的大小,并非单纯的根据父容器大小尺寸位置。和尚为了测试方便,设置了一个固定的 400dp*400dp 的 LinearLayout,测试百分数 + p 的方式都正常,但是如果设置 View 居中或其他情况时跟和尚想的很有差距,和尚测试了很久,终于有一些了解。

百分比 + p 这种方式是相对的,既与父容器相关也与自身 View 相关,当设置 View 位置为居中或其他位置时,整个移动的坐标系也会变化,原点并非直接父容器左上角而是自身 View 左上角,整个移动布局根据 View 平移;而父容器是一个框架,动画的范围大小为父容器大小且只在父容器中进行展示。如图:

和尚这才了解到刚开始测试时并未设置 LinearLayoutgravity 或自身 Viewlayout_gravity 属性,默认是居左上角,此时与父容器左上角重合。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="开始动画" />
  <FrameLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" >
    <LinearLayout
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#8099cc00"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="125dp"
        android:gravity="center"
        android:orientation="horizontal" />
    <LinearLayout
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#80008577"
        android:gravity="center"
        android:orientation="horizontal" >
      <View
          android:id="@+id/anim_v1"
          android:layout_width="300dp"
          android:layout_height="150dp"
          android:background="@color/colorAccent"
          android:gravity="center"
          android:text="Hello World!" />
    </LinearLayout>
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="248dp"
        android:layout_marginTop="123dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="48dp"
        android:layout_marginTop="323dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="248dp"
        android:layout_marginTop="323dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="448dp"
        android:layout_marginTop="523dp"
        android:background="@android:color/background_dark" />
  </FrameLayout>
</LinearLayout>

7. android:interpolator="@android:anim/accelerate_decelerate_interpolator"

interpolator 代表缩放动画曲线,即动画由大变小,变换速率等,和尚目前还未学习到,后期补充。


和尚的动画部分是短板,正在从零学习,不对的请多多指正。

本文分享自微信公众号 - 阿策小和尚(gh_8297e718c166),作者:阿策小和尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 基础动画之 alpha 透明度 / translate 平移 / rotate 旋转

    和尚最近在学习 Android 基本动画,前两天整理了一下相对复杂的 Android 基础动画之 scale 渐变缩放,今天继续学习整理其他三种基本...

    阿策
  • Android 沉浸式状态栏 以及 伪沉浸式状态栏

    和尚我最近在调整页面状态栏的效果,主要包括沉浸式状态栏和伪沉浸状态栏(同事唠嗑给定义的玩的)。 前段时间整理过一篇 Android 沉浸...

    阿策
  • Android Kotlin/Java 动态设置 shape/drawable 等状态效果

    和尚我最近遇到一个小需求,程序里面有个别页面,需要动态的调整某个页面的样式,包括一键变灰等效果。 以前页面是用 shape 和 draw...

    阿策
  • 线性布局LinearLayout(二)

    线性布局,顾名思义,指的是整个Android布局中的控件摆放方式是以线性的方式摆放的, 代码中加载主界面布局是从onCreate开始的:

    李小白是一只喵
  • [android] 手机卫士自定义对话框布局

    点击手机防盗,进行判断,如果没有设置密码,显示一个设置密码的对话框,如果已经设置密码了,弹出输入密码对话框

    陶士涵
  • Android应用界面开发——Widget(实现液晶时钟)

    桌面控件是通过BroadcastReceiver的形式进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver。开发桌面控件时,只需继承Bro...

    trampcr
  • 第一个Android应用Android应用界面开发

    给项目取名First Application 主界面命名FirstAty,xml文件命名就自动使用activity_first_aty吧。

    爱因斯坦福
  • Material Design整理(六)——SearchView及FlexboxLayout

    蜻蜓队长
  • Android自定义View

    前几天在郭霖大神的博客上看了自定义View的知识,感觉受益良多,大神毕竟大神。在此总结一下关于Android 自定义View的用法:

    指点
  • 体验活动的生命周期

    当窗口处于停止状态的时候,我们需要保存一部分销毁前的值,可以使用bundle,如下:

    Dream城堡

扫码关注云+社区

领取腾讯云代金券