动画效果

1. 透明动画 按钮透明

① 用代码控制

创建一个按钮

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/btnClickMe" />
</LinearLayout>
public class MainActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                // 透明动画 透明效果从 0->1
                AlphaAnimation aa = new AlphaAnimation(0, 1);
                aa.setDuration(1000);  // 时间设置 1s
                v.startAnimation(aa);  // 把按钮设置改动画
            }
        });
        System.out.println("onCreate");
    }
}

② 用 anim目录下面的xml配置文件来实现

在 res/anim/aa.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- fromAlpha从0   toAlpha到1 duration时间1s-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="1000"
    />
public class MainActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                /*// 透明动画 透明效果从 0->1
                AlphaAnimation aa = new AlphaAnimation(0, 1);
                aa.setDuration(1000);  // 时间设置 1s
                v.startAnimation(aa);  // 把按钮设置改动画*/

                // 用配置文件来实现
                v.startAnimation(AnimationUtils.loadAnimation(v.getContext(), R.anim.aa));
            }
        });
        System.out.println("onCreate");
    }
}

2. 旋转动画

视图界面 -- 一个按钮

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/btnClickMe"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

①直接使用java代码

public class MainActivity extends Activity{

    private RotateAnimation ra = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //ra = new RotateAnimation(0, 360); // 默认从0,0 旋转360度
        //ra = new RotateAnimation(0, 360 ,10, 10); // 从 10,10 旋转360度
        ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        ra.setDuration(1000); //时间 1s

        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                v.startAnimation(ra);   //用代码

            }
        });
        System.out.println("onCreate");
    }
}

② 用配置文件 xml    /res/anim/rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%"
     />

java代码

public class MainActivity extends Activity{

    private RotateAnimation ra = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                //用xml文件
                v.startAnimation(AnimationUtils.loadAnimation(v.getContext(), R.anim.rotate));
            }
        });
        System.out.println("onCreate");
    }
}

3. 移动动画

视图----- 一个按钮

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/btnClickMe"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

① 直接用java

public class MainActivity extends Activity{

    private TranslateAnimation ta = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ta = new TranslateAnimation(0, 200, 0, 200);  // x + 200  y+200
        ta.setDuration(1000);// 1s 时间

        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                v.startAnimation(ta);
            }
        });
        System.out.println("onCreate");
    }
}

② anim/translate.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<translate android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="200"
    android:toYDelta="200"
    android:duration="1000"
    xmlns:android="http://schemas.android.com/apk/res/android" />
public class MainActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.findViewById(R.id.btnClickMe).setOnClickListener(new View.OnClickListener() { //按钮点击监听
            @Override
            public void onClick(View v) {
                // 调用配置文件 执行
                v.startAnimation(AnimationUtils.loadAnimation(v.getContext(), R.anim.translate));
            }
        });
        System.out.println("onCreate");
    }
}
时间: 2024-10-06 23:48:25

动画效果的相关文章

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

iOS 之动画效果

/** type *  各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API. *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. *  @"cube"                     立方体翻滚效果 *  @"moveIn"    

Core Animation 动画效果介绍

在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): UIView继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. UIView负责对内容的管理,而CALayer则是对内容的绘制 UIView中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. 通过修改CALayer可以实现UIVi

带感”的边框交互动画效果

  效果的原理其实就是"四条边"发生宽度和高度的变化,上下两边是宽度变化,左右两边是高度的变化: 它们发生变化的方向也可以可控的,根据坐标设置即可控制. 下面我们直接上代码: 首先准备基础代码,那四条边并不是真正的border,而是通过标签加以宽高写出来,然后定位到四个方向: <!-- html --> <div class="box"> <div class="topL"></div> <d

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,

javascript动画效果之缓冲动画(修改版)

在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化 原版的html和css代码在这里javascript动画效果之缓冲动画 js代码如下 1 <script> 2 function $(id) { 3 return typeof id === &

自己动手丰衣足食,为Zepto添加Slide动画效果

一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页面过渡需要用到动画,简单的show/hide过渡太生硬,对用户不友好,并且移动端大多都是采用slide效果,此文主要是为zepto拓展slide动画. 二.发现 从zepto的在线文档上可以发现一个发布在github上的动画模块,但是缺少slide效果,度娘上找了找,相关的极少,只发现了一个slid

jQuery动画效果(借鉴他人的)

(1)jquery中常见的几种动画效果 (2)动画队列执行的顺序 对于一组元素上的动画效果,有如下两种情况: a) 当在一个animate()方法中应用多个属性时,动画是同时发生的. b) 当以链式的写法应用动画方法时,动画是按照顺序发生的. 对 于多组元素上的动画效果,有如下情况: a) 默认情况下,动画都是同时发生的. b) 当以回调的形式应用动画方式时,动画是按照回调顺序发生的. 另外,在动画方法中,要注意其他非动画的方法会插队,例如css()方法,要使这些非动画的 方法也按照顺序来执行,

CSS动画效果之animation

Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果.这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦! 一个@keyframe例子: 1 /*定义关键帧动画*/ 2 @keyframes myframe {

仿window阿里旺旺登陆界面,打印机吐纸动画效果-b

偶然的机会发现window的阿里旺旺的登陆效果蛮有意思的,于是就模仿着做了一下打印机吐纸的动画效果看起来很神奇的东西,实现起来却不难,下面我给大家看下主要的源码. - (void)createUI{    UIImageView *backimageView=[[UIImageView alloc]init];        backimageView.image =[UIImage imageNamed:@"1.png"];        backimageView.frame =