CustomAnim自定义动画

Android原生提供四种基本动画,但可通过自定义实现更复杂的动画效果。本文详细介绍了如何创建沿X/Y轴平移的动画,以及实现物体左右摇晃的动画效果,扩展了Android动画的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android只提供了4种基本动画效果,除了可以叠加效果外,我们还可以进行自定义动画。

  • 制作一个随X/Y轴不断变化的平移动画效果
  • 制作一个左右摇晃的动画效果
MainActivity.class不变:

package com.customanim.customanim;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {
	
	private CustomAnim ca;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ca = new CustomAnim();
        ca.setDuration(1000);

        findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				arg0.startAnimation(ca);
			}
		});
    }
}


一、平移动画效果:

package com.customanim.customanim;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class CustomAnim extends Animation {
	
	@Override
	public void initialize(int width, int height, int parentWidth,
			int parentHeight) {
		
		super.initialize(width, height, parentWidth, parentHeight);
	}
	
	
	@Override
	protected void applyTransformation(
			float interpolatedTime//0-1s时间
			, Transformation t//变化对象
			) {
		t.getMatrix().setTranslate(200*interpolatedTime,//沿X轴变化
                        200*interpolatedTime//沿Y轴变化
                    );
		super.applyTransformation(interpolatedTime, t);
	}
}


二、摇晃动画效果:

package com.customanim.customanim;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class CustomAnim extends Animation {
	
	@Override
	public void initialize(int width, int height, int parentWidth,
			int parentHeight) {
		
		super.initialize(width, height, parentWidth, parentHeight);
	}
	
	
	@Override
	protected void applyTransformation(
			float interpolatedTime//0-1s时间
			, Transformation t//变化对象
			) {
	
		/*
		 * 
		  Special cases: 
          sin(+0.0) = +0.0 
          sin(-0.0) = -0.0 
          sin(+infinity) = NaN 
          sin(-infinity) = NaN 
          sin(NaN) = NaN 
          参数:
          d the angle whose sin has to be computed, in radians.
          返回:
          the sine of the argument.
		 */
		t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime*20//控制摇晃的时间/频率
)*50//控制摇晃的距离
), 0);
		
		super.applyTransformation(interpolatedTime, t);
	}
	
}


<think>我们正在处理用户关于QML动画实现的问题。根据用户请求,我们需要提供QML动画效果的示例教程。同时,根据系统级指令,我们需要使用正确的LaTeX格式,生成相关问题,并在回答中引用给定的引用内容。用户需求:实现QML动画效果的示例教程。根据引用内容,我们可以总结以下几点:-引用[1]提到QML中实现对象动画的直观性,并给出了一个Rectangle的示例片段(虽然不完整)。-引用[2]提到了QML中动画的类型,包括AnchorAnimation、ParentAnimation等。-引用[3]提到了如何取消动画(虽然用户可能暂时不需要,但我们可以忽略)。-引用[4]给出了一个SequentialAnimation的示例,使对象在x轴上循环移动。因此,我们可以设计一个简单的教程,涵盖以下内容:1.基本属性动画:改变矩形的宽度、高度、位置等。2.使用不同类型的动画:比如SequentialAnimation(顺序动画)和ParallelAnimation(并行动画)。3.状态和过渡:通过状态改变触发动画。由于引用中提到了状态和过渡(引用[2]),我们可以结合状态机来展示动画。示例教程结构:1.创建一个矩形,并为其添加颜色属性。2.定义状态:比如“正常”状态和“点击后”状态。3.定义状态改变时的过渡动画。4.使用SequentialAnimation实现连续动画(如引用[4]的示例)。注意:我们应使用中文,并确保LaTeX格式正确(虽然QML代码中可能没有数学表达式,但如果有解释性的数学公式,比如计算动画路径,则使用LaTeX)。下面开始构建回答:</think>### QML 动画实现示例教程 在 QML 中实现动画效果主要涉及三种核心组件:**动画类型**、**状态机**和**过渡控制**。以下是详细实现示例: #### 1. 基础属性动画 ```qml Rectangle { id: rect width: 100; height: 100 color: "blue" // 点击触发平移动画 MouseArea { anchors.fill: parent onClicked: anim.start() } // 定义x轴移动动画 NumberAnimation on x { id: anim to: 300 duration: 1000 easing.type: Easing.InOutQuad // 平滑缓动曲线[^4] } } ``` > **效果**:点击蓝色方块时,在1秒内平滑移动到x=300位置 #### 2. 状态驱动动画 ```qml Rectangle { id: container width: 300; height: 200 Rectangle { id: box width: 50; height: 50 color: state == "active" ? "red" : "green" // 定义两种状态[^2] states: [ State { name: "active"; PropertyChanges { target: box; x: 250 } }, State { name: "inactive"; PropertyChanges { target: box; x: 0 } } ] // 状态过渡动画[^1] transitions: [ Transition { from: "*"; to: "active" ParallelAnimation { NumberAnimation { properties: "x"; duration: 800 } ColorAnimation { duration: 400 } // 颜色渐变 } } ] } // 状态切换按钮 Button { text: "切换状态" onClicked: box.state = (box.state == "active" ? "inactive" : "active") } } ``` > **效果**:点击按钮切换状态时,方块同时执行平移和颜色渐变动画 #### 3. 复合动画序列 ```qml Rectangle { id: rocket width: 50; height: 50 color: "orange" radius: 25 SequentialAnimation on y { id: launchSequence running: false loops: Animation.Infinite // 无限循环[^4] // 第一阶段:加速上升 NumberAnimation { to: -200 duration: 1000 easing.type: Easing.OutQuad } // 第二阶段:抛物线下降 ParallelAnimation { NumberAnimation { properties: "y" to: 0 duration: 1500 } RotationAnimation { target: rocket to: 360 duration: 1500 } } } // 启动动画 Component.onCompleted: launchSequence.start() } ``` > **效果**:圆形物体先加速上升,后旋转下落形成抛物线轨迹 #### 关键概念说明: 1. **动画类型**: - `NumberAnimation`:数值属性变化(位置/大小/透明度等) - `ColorAnimation`:颜色渐变 - `RotationAnimation`:旋转动画 - `SequentialAnimation`:顺序执行动画序列[^4] - `ParallelAnimation`:并行执行动画[^2] 2. **缓动曲线**: 通过`easing.type`控制动画加速度,如: - `Easing.Linear`:匀速 - `Easing.InOutBack`:弹性效果 - `Easing.InSine`:缓入加速 3. **动画控制**: ```qml // 手动控制动画 PropertyAnimation { id: customAnim //... } Button { text: "启动" onClicked: customAnim.start() } Button { text: "停止" onClicked: customAnim.stop() // 或 customAnim.pause() } ``` > **调试提示**:在动画运行时修改属性值可能导致冲突,建议使用`Behavior`封装属性或通过状态机管理[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值