澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2020-03-18 12:09 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

CoreAnimation变速齿轮旋转动画实现,iOS动画系列之

第一大家来看下起始加载动漫:
#pragma mark 图片开始加载动画- startLoadingAnimation{ if (loadingGearView) { //先移除之前的动画 [loadingGearView.layer removeAllAnimations]; //创建旋转动画 CABasicAnimation* startRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; startRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ]; startRotation.duration = 2.0; //设置旋转动画是开始先慢后面越来越快的动画运动时间函数 startRotation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeIn"]; startRotation .delegate = self; //设置标志来区别是否是即将停止 [startRotation setValue:@NO forKey:@"isStop"]; //添加动画 [loadingGearView.layer addAnimation:startRotation forKey:@"startRotationAnimation"]; }}
 //设置动画属性 basicAni.keyPath = @"position"; //动画填充模式 basicAni.fillMode = kCAFillModeForwards;

安卓动漫分类

卡通分类

安卓动漫分为图中所示4大类。
所谓帧动漫,即思虑相当多图形,让图片按一如时期总是播发,进而到达模拟动漫效果。而补间动漫则是对单个帧实行听得多了自然能详细讲出来操作。通俗的明亮,它能够对单张图片进行5种操作:折射率、位移、旋转、缩放以至地方两种操作的三结合操作。那比帧动漫要节省能源。
本节介绍补间动漫。先看效率。

效果

补间动画有三种实现方式——资源文件中配置动漫效果、java代码完成。
能源文件中安插适用于固定动漫,java代码完毕相比灵敏。

小品种:实现变速旋转动漫

澳门威尼斯人赌场 1效果图

OC和斯威夫特的下载地址如下:

步骤

财富文件中贯彻:
  • res/anim文件夹中创建动画配置文件
  • activity中,AnimationUtils.loadAnimation加载该配置文件
  • startAnimation开运营漫
java代码中贯彻:
  • 采纳new 阿尔法Animation/RotateAnimation/TranslateAnimation /ScaleAnimation ,创制四个animation对象
  • 再使用该对象的setDuration、setInterpolator等情势设置动漫效果
  • startAnimation开运营画
咱俩地方安装了代办,大家再代理方法中落到实处正在加载动漫
#pragma mark 动画结束的动画代理方法中,添加图片正在加载动画- animationDidStop:(CAAnimation *)anim finished:flag{ if ([[anim valueForKey:@"isStop"] boolValue]) { [self hideView]; return; } CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ]; rotationAnimation.duration = 1.0; rotationAnimation.cumulative = YES; rotationAnimation.repeatCount = HUGE_VALF; [loadingGearView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"]; }

此间主即使为着演示fromValue/toValue 、 设置layer的Position地方、实现代理方法里面安装position的分别。

源码

1、activity的构造文件

<LinearLayout 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:orientation="vertical"          
    tools:context=".MainActivity">

    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="alpha动画"
        android:id="@ id/btn_alpha"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scale动画"
        android:id="@ id/btn_scale"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="translate动画"
        android:id="@ id/btn_translate"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="rotate动画"
        android:id="@ id/btn_rotate"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="set动画(上面动画的组合)"
        android:id="@ id/btn_set"
        android:onClick="click"/>

    <ImageView
        android:id="@ id/image"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_marginTop="30dip"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

2、MainActivity

public class MainActivity extends Activity {

    private Button btn_scale, btn_rotate, btn_translate, btn_alpha, btn_set;
    private ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();

    }

    private void bindViews() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        btn_translate = (Button) findViewById(R.id.btn_translate);
        btn_set = (Button) findViewById(R.id.btn_set);
        image = (ImageView) findViewById(R.id.image);
    }

    public void click(View view) {

        switch (view.getId()) {

        case R.id.btn_alpha:
            /** 资源文件中实现方式 **/
            /*
             * Animation alpha = AnimationUtils.loadAnimation(this,
             * R.anim.anim_alpha); image.startAnimation(alpha);
             */

            /** java代码中实现方式 **/
            Animation alpha = new AlphaAnimation(0.1f, 1);
            alpha.setDuration(2000);
            image.startAnimation(alpha);

            break;
        case R.id.btn_rotate:
            /** 资源文件中实现方式 **/
            /*
             * Animation rotate = AnimationUtils.loadAnimation(this,
             * R.anim.anim_rotate); image.startAnimation(rotate);
             */

            /** java代码中实现方式 **/
            Animation rotate = new RotateAnimation(0, 360);
            rotate.setDuration(2000);
            image.startAnimation(rotate);
            break;
        case R.id.btn_scale:
            /** 资源文件中实现方式 **/
            /*
             * Animation scale = AnimationUtils.loadAnimation(this,
             * R.anim.anim_scale); image.startAnimation(scale);
             */

            /** java代码中实现方式 **/
            Animation scale = new ScaleAnimation(0, 1, 0, 1);
            scale.setDuration(2000);
            image.startAnimation(scale);

            break;
        case R.id.btn_translate:
            /** 资源文件中实现方式 **/
            /*
             * Animation translate = AnimationUtils.loadAnimation(this,
             * R.anim.anim_translate); image.startAnimation(translate);
             */

            /** java代码中实现方式 **/
            Animation translate = new TranslateAnimation(0, 100, 0, 0);
            translate.setDuration(2000);
            image.startAnimation(translate);

            break;
        case R.id.btn_set:
            Animation set = AnimationUtils.loadAnimation(this, R.anim.anim_set);
            image.startAnimation(set);

            break;

        }

    }

}

3、res/anim能源文件中卡通配置文件

品类必要:
  1. 刚开头加载能源的时候,齿轮速度从慢到快,不断加快
  2. 增长速度到一定速度,就不在加速,以那一个速度一向旋转下去
  3. 当加载财富做到的时候,齿轮速度又领头不久变慢,不断减速
  4. 放缓完毕直到没速度的时候,关闭加载视图

此处本人是运用CoreAnimation完成的,感到麻烦,然则幸亏促成了效劳

第一,大家解析该卡通进程,一共须求3个卡通:

  • 发端加载动漫
  • 正值加载动漫
  • 甘休加载动漫

上面的loadingGearView便是地方GIF图的拾叁分轮子

源代码也坐落于了码云上边。

anim_scale.xml

fromXScale开首时x轴缩放尺寸,toXScale截至时缩放尺寸。这里从1.0到0.0意味x轴方向图片由100%比重减弱到0。pivotX表示缩放主旨点,一半表示以图表大旨为缩放中央点。duration动画时间,单位飞秒。

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale 
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000"/>
</set>
利落加载动漫和起来加载动漫大概,分化的是easeOut的动漫时间函数
#pragma mark 图片结束加载动画- stopLoadingAnimation{ if (loadingGearView) { [loadingGearView.layer removeAllAnimations]; //创建结束旋转动画 CABasicAnimation* stopRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; stopRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ]; stopRotation.duration = 2.0; stopRotation.delegate = self; //前面的都一样,这里开始就和开始旋转动画不同了 stopRotation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeOut"]; [stopRotationsetValue:@YES forKey:@"isStop"]; [loadingGearView.layer addAnimation:stopRotation forKey:@"stopRotationAnimation"]; }}
 //MARK: - 懒加载 private lazy var redLayer: CALayer = { let layer = self.createLayer(position: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red) return layer }()
澳门威尼斯人赌场,anim_rotate.xml
<?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="2000"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>
末段上贰个美图:

澳门威尼斯人赌场 2动画美眉,性障碍,一定要有多个配图

Swift版本大约和OC的大同小异。略有分歧的是,swift在加载layer的时候,大家利用了懒加载的主意。也等于在应用的时候才去创设这么些layer。

anim_alpha.xml

android:interpolator为插值器,可设置动画的快慢效果。如这里的@android:anim/accelerate_decelerate_interpolator代表先加快后减速。fromAlpha最初时折射率为1.0,即不透明。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:duration="2000"/>
</set>
//遵守动画的代理协议@interface STBasicPositionViewController ()<CAAnimationDelegate>@property(weak,nonatomic)CALayer * redLayer;@end@implementation STBasicPositionViewController- viewDidLoad { [super viewDidLoad]; //创建CALayer CALayer *redLayer = [CALayer layer]; //设置位置和大小 redLayer.position = CGPointMake; redLayer.bounds = CGRectMake(0, 0, 100, 100); //设置背景颜色 redLayer.backgroundColor = [UIColor redColor].CGColor; //把layer添加到UIView的layer上 [self.view.layer addSublayer:redLayer]; self.redLayer = redLayer; /*------------开始设置动画------------------------*/ //创建动画对象 CABasicAnimation *basicAni = [CABasicAnimation animation]; //设置动画属性 basicAni.keyPath = @"position"; //设置动画的起始位置。也就是动画从哪里到哪里 basicAni.fromValue = [NSValue valueWithCGPoint:CGPointMake]; //动画结束后,layer所在的位置 basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake]; //动画持续时间 basicAni.duration = 2; //动画填充模式 basicAni.fillMode = kCAFillModeForwards; //动画完成不删除 basicAni.removedOnCompletion = NO; //xcode8.0之后需要遵守代理协议 basicAni.delegate = self; //把动画添加到要作用的Layer上面 [self.redLayer addAnimation:basicAni forKey:nil]; }#pragma 实现代理协议的方法//动画开始的时候调用- animationDidStart:(CAAnimation *)anim{ self.redLayer.position = CGPointMake; }//动画结束的时候调用- animationDidStop:(CAAnimation *)anim finished:flag{ self.redLayer.position = CGPointMake;}@end
anim_set.xml

重新整合卡通,只需在set标签中,把上述4中或自由的有余放进去就能够。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:duration="2000"/>

     <scale 
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000"/>

     <rotate 
        android:fromDegrees="0"
        android:toDegrees="360"
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"/>

     <translate 
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:duration="2000"/>

</set>

明天就到此地呀。看样子宏图卓著的业绩希图一篇写完的CABasic Animation是没戏啊。下一篇小说写缩放那么些的吗。肆意的技巧宅。哈哈~

anim_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:duration="2000"/>

</set>

喜好的话就点个赞呗,也许赏作者点口粮。摸摸哒~爱你们~

iOS实践:CABasic-Animation(OC和Swift两版)

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:CoreAnimation变速齿轮旋转动画实现,iOS动画系列之

关键词: 澳门威利斯人 动画 变速齿轮 CoreAnimatio