图片无限旋转动画
平时喜欢拿着手机去听歌,看到qq音乐中有一个图片绕着中心无限旋转 的动画,于是自己动手写了个,给大家分享下。
1 xml布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.rotateanimate.MainActivity" > <Button android:id="@+id/btn_start" android:text="动画开始" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <ImageView android:id="@+id/iv_sharp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:scaleType="center" android:src="@drawable/shape" /> </RelativeLayout>
2 动画的配置
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:fromDegrees="0" android:toDegrees="360" android:duration="5000" android:repeatCount="-1" android:pivotX="50%" android:pivotY="50%" /> </set>
其中:repeatCount = -1 表示无限循环的意思
privotX="50%" 表示旋转中心的X轴为相对于自身的50%,50%p 表示相对于屏幕X轴的50%
privotY="50%" 表示旋转中心的Y轴相对于自身的50%,50%p 表示相对于屏幕Y轴的50%
duration="5000" 表示动画的时间为5000毫秒
3 activity中的代码
package com.example.rotateanimate;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends ActionBarActivity {
private ImageView ivShape;
private Button btnBegin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ivShape = (ImageView)findViewById(R.id.iv_sharp);
btnBegin = (Button)findViewById(R.id.btn_start);
final Animation animation = AnimationUtils.loadAnimation(this, R.anim.image_rotate_animate);
animation.setInterpolator(new LinearInterpolator());
btnBegin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ivShape.startAnimation(animation);
}
});
}
}
需要注意的是:
在xml配置中不能设置旋转的速度,一定要在代码中加上
animation.setInterpolator(new LinearInterpolator());
这段代码才能实现匀速旋转,否则会出现旋转一周后,停顿的情况。
相关推荐
旋转动画是Android动画框架的一部分,它允许视图(View)围绕其自身的中心点进行旋转。这种动画效果常用于模拟物体的转动,如题目中的风车旋转。 要实现这个项目,我们遵循以下步骤: 1. **添加ImageView**:在...
"Android项目 Rotatable-master旋转动画"是一个专门用于实现3D旋转效果的开源项目,适用于那些希望在应用程序中添加动态旋转效果的开发者。该项目提供了简单易用的API,使得开发者能够轻松地将旋转动画集成到自己的...
本教程将深入探讨如何使用`Animation`类来实现图片的旋转效果,以创建一个在刷新或加载时显示的旋转动画。 首先,我们需要了解Android中的`Animation`类。`Animation`是所有动画的基础类,它提供了一个框架来控制...
在“HTML5+SVG地球旋转动画特效”这个项目中,我们将深入探讨如何利用这两种技术来构建一个无需依赖任何图片资源的地球旋转动画。 首先,HTML5引入了许多新特性,其中一项就是`<canvas>`元素,它提供了一个基于...
现在,两张图片将以各自设定的频率围绕它们各自的中心点旋转。 总结来说,通过CSS的`transform`和`animation`属性,我们可以轻松地实现图片的旋转效果。结合`transform-origin`,我们可以控制旋转的中心点,而`@...
通过设置`QTransform`的旋转角度,我们可以轻松地将图片围绕其中心点进行旋转。 实现360度旋转图片的步骤如下: 1. **创建自定义控件**:首先,我们需要继承`QWidget`类并创建一个新的控件,例如`...
为了使效果更接近百度首页的音乐旋转,我们可能需要添加一些额外的CSS样式来控制图片的中心点,以便让图片围绕自己的中心旋转,而不是角点。这可以通过`transform-origin`属性实现: ```css .image-container img {...
在这个特定的场景中,我们关注的是2D平面上的3D旋转效果,即让图片围绕Y轴进行连续转动。 Android提供了多种实现动画的方式,如帧动画(AnimationDrawable)、属性动画(Property Animation)以及视图动画(View ...
旋转动画在iOS中可以通过`CAKeyframeAnimation`或`UIView.animate(withDuration:)`方法来实现。使用`UIView.animate(withDuration:)`时,可以设置`transform.rotation.z`属性来控制视图围绕Z轴旋转,例如: ```...
CenterX和CenterY的值为Image.Width/2和Image.Height/2,这意味着图片将围绕其自身的几何中心旋转。 在实际应用中,我们可以使用数据绑定或代码-behind动态改变Angle属性的值,以创建动画效果,让图片随时间连续...
默认情况下,元素是围绕其自身的中心点旋转的。例如,我们可以设置一个初始的旋转角度: ```css div { transform: rotate(0deg); } ``` 然后,在鼠标悬停时,我们可以改变旋转角度,触发旋转动画: ```css div:...
这段XML代码定义了一个无限循环的旋转动画,围绕中心点(50%的宽度和高度)从0度旋转到360度,持续时间为1000毫秒。 接下来,我们谈谈帧动画。帧动画是在特定时间间隔内顺序显示一系列图像,从而创建动态效果。在...
第二种可能涉及动画效果,使用`@keyframes`规则创建一个旋转动画,并应用到`animation`属性上: ```css @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } img { ...
这个压缩包"Android 仿百度播放器圆形图片旋转效果.rar"提供了一个实例,教你如何在Android应用中创建一个类似百度网页音乐播放器的圆形图片旋转动画效果。这个效果通常用于表示加载或播放状态,给用户一种动态反馈...
本资源“CSS3微信表情图片旋转动画.zip”是一个专门针对微信表情图片设计的旋转动画实例,旨在展示如何利用CSS3的属性和方法实现动态效果。 首先,我们来探讨CSS3中的关键帧动画(@keyframes)。这个特性允许开发者...
3. **环形展开**:图片围绕中心点旋转展开,利用了`rotateZ`和`translate`属性,结合`animation`定义动画关键帧,形成环状展开的动态效果。 4. **螺旋展开**:这种效果通过`rotate`和`translate`组合使用,让图片...
图片可以围绕中心点旋转,增加趣味性。使用CSS3的`transform: rotate()`属性结合jQuery控制时间轴,可以实现旋转效果。 5. **随机位置效果** 图片在切换时,新图片从屏幕上的随机位置出现。通过计算坐标并更新CSS...
在CSS3中,`transform: rotate(角度)`用于指定元素围绕其自身中心点按给定的角度进行旋转。例如,`rotate(45deg)`会将元素顺时针旋转45度。 为了实现图片的旋转背景特效,我们可以创建一个包含图片的容器,并应用`...
首先,要实现360度旋转,我们需要准备一系列连续拍摄的产品图片,这些图片通常是围绕产品中心360度拍摄的。每张图片代表一个微小的角度,当这些图片按顺序快速显示时,会给用户带来360度旋转的视觉效果。 接下来,...
// 可以使用PropertyBinding或Animation将angle动态改变来实现旋转动画 } } ``` ### 4. 动画控制 QML提供了多种方式来控制动画,例如使用`Animation`、`SequentialAnimation`和`ParallelAnimation`。在风车旋转的...