普京网址 13

本文主要介绍利用自定义view打造一个绚丽的加载动画普京网址:,线性重复动画

线性重复动画,线性动画

线性重复动画

普京网址 1

 

效果

普京网址 2

 

说明

线性重复的卡通片能够用在以下的片段处境:

1)线性加载效果(如上海体育场地)

2)下载箭头的轮回出现

 

源码

//
//  ReplicatorLineAnimationView.h
//  Animations
//
//  Created by YouXianMing on 16/4/12.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {

    kReplicatorLeft,
    kReplicatorRight,
    kReplicatorUp,
    kReplicatorDown

} EReplicatorLineDirection;

@interface ReplicatorLineAnimationView : UIView

/**
 *  Animation's direction.
 */
@property (nonatomic) EReplicatorLineDirection  direction;

/**
 *  Animation's speed.
 */
@property (nonatomic) CGFloat           speed;

/**
 *  Animation's image.
 */
@property (nonatomic, strong) UIImage  *image;

/**
 *  Start animation.
 */
- (void)startAnimation;

@end

//
//  ReplicatorLineAnimationView.m
//  Animations
//
//  Created by YouXianMing on 16/4/12.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "ReplicatorLineAnimationView.h"

@interface ReplicatorLineAnimationView () {

    CAReplicatorLayer *_replicatorLayer;
    CALayer           *_animationLayer;
    NSString          *_animationKeyPath;
    CGFloat            _animationToValue;
    CGFloat            _offsetX;
    CGFloat            _offsetY;
    CATransform3D      _instanceTransform;
    BOOL               _startAnimation;
}

@end

@implementation ReplicatorLineAnimationView

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {

        self.speed             = 2.f;
        _replicatorLayer       = [CAReplicatorLayer layer];
        _replicatorLayer.frame = self.bounds;
        [self.layer addSublayer:_replicatorLayer];

        _animationLayer       = [CALayer layer];
        _animationLayer.frame = self.bounds;
        [_replicatorLayer addSublayer:_animationLayer];

        self.layer.masksToBounds = YES;

        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(eventDidBecomeActive:)
                                                     name:UIApplicationDidBecomeActiveNotification object:nil];
    }

    return self;
}

- (void)startAnimation {

    _startAnimation = YES;

    if (_animationKeyPath.length) {

        [_animationLayer removeAnimationForKey:_animationKeyPath];
    }

    [self dealWithTheEReplicatorLineDirection];

    _replicatorLayer.instanceCount      = 2;
    _replicatorLayer.instanceTransform  = _instanceTransform;
    _animationLayer.contents            = (__bridge id _Nullable)(self.image.CGImage);

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:_animationKeyPath];
    animation.toValue           = @(_animationToValue);
    animation.duration          = 1.f / self.speed;
    animation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.repeatCount       = HUGE_VALF;
    [_animationLayer addAnimation:animation forKey:_animationKeyPath];
}

- (void)dealWithTheEReplicatorLineDirection {

    if (_direction == kReplicatorLeft || _direction == kReplicatorRight) {

        _animationKeyPath  = @"position.x";
        _offsetX           = _direction == kReplicatorLeft ? self.frame.size.width : -self.frame.size.width;
        _offsetY           = 0;
        _animationToValue  = _animationLayer.position.x - _offsetX;
        _instanceTransform = CATransform3DMakeTranslation(_offsetX, 0.0, 0.0);

    } else if (_direction == kReplicatorUp || _direction == kReplicatorDown) {

        _animationKeyPath  = @"position.y";
        _offsetX           = 0;
        _offsetY           = _direction == kReplicatorUp ? self.frame.size.height : -self.frame.size.height;
        _animationToValue  = _animationLayer.position.y - _offsetY;
        _instanceTransform = CATransform3DMakeTranslation(0.0, _offsetY, 0.0);
    }
}

- (void)dealloc {

    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIApplicationDidBecomeActiveNotification object:nil];
}

- (void)eventDidBecomeActive:(id)obj {

    NSNotification *fication = obj;

    if ([fication.name isEqualToString:UIApplicationDidBecomeActiveNotification]) {

        if (_startAnimation == YES) {

            [self startAnimation];
        }
    }
}

@end

 

细节

线性重复动画是有所方向性的,他有4个样子可供你选择:

普京网址 3

您需求安装方向值、速度值以及一路尧以循环展现的图样,对图纸也许有须要的,图片的话须要保障活动的时候能够无缝衔接:

普京网址 4

CALayer的相干动画会在步入后台的时候自动移除掉了,所以,从后台步向前台的时候要求手动开运转画:

普京网址 5

以下是着力所在:

普京网址 6

 

线性重复动画 效果 表达线性重复的动画能够用在偏下的一些境况: 1)线性加载效果(如上海教室)
2)下载箭头的…

线性重复动画

线性重复动画

转载请注解出处

逐帧动画

逐帧动画也叫 Drawable Animation,是最简便易行最直观的动画效果。

在Android
中达成逐帧动画就是由设计员给出一雨后玉兰片情景不断退换的图纸,开荒者就钦点那个图片展现的持续时间,然后所有人家开端广播这么些图片,就产生了动画片了。

行使逐帧动画 不仅可以够行使XML的法子完结,也足以动用代码来落到实处。

普京网址 7

普京网址 7

在我们的品类中,非常多意况要求使用加载进度动画,如网络诉求,数据加载等。

XML

率先把财富文件(每一帧的图片)放在 res/drawable 下。 如图:

普京网址 9

下一场在此地 新建多个XML文件。 在这么些文件中央银行使的
<animation-list>标签来定义动画。使用<item>标签来定义动画的每一帧,并在每叁个<item>中钦定自个儿的习性,例如持续时间 android:duration=”300″ 、 这一帧使用的图样
android:drawable=”@drawable/z_1_die_01″ 。

frme_animation.xml

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

    <item
        android:drawable="@drawable/z_1_die_01"
        android:duration="300"/>
    <item
        android:drawable="@drawable/z_1_die_02"
        android:duration="300"/>
    <item
        android:drawable="@drawable/z_1_die_03"
        android:duration="300"/>
    <item
        android:drawable="@drawable/z_1_die_04"
        android:duration="300"/>
    <item
        android:drawable="@drawable/z_1_die_05"
        android:duration="300"/>

</animation-list>

android:oneshot 来决定动画是不是循环播放, false 表示 循环播放 , true
表示 不循环播放 。

在控件的布局中给控件使用那个 drawable 文件

<ImageView
android:id="@+id/iv_frame_xml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/frme_animation"/>

概念好了这几个动画,为了让动画播放,将在选用代码让她起来播放,代码如下:

//xml
ImageView ivFrameXml = (ImageView) findViewById(R.id.iv_frame_xml);
AnimationDrawable background = (AnimationDrawable)ivFrameXml.getDrawable();
background.start();

 

 

今昔市情大大多app都有具有自个儿特别风格的加载动画,并非Google为大家提供的黄华圈。三个亮丽雅观的加载动画可避防除用户的守候忧虑。本文主要介绍利用自定义view营造二个炫丽的加载动画。

代码格局

代码的点子更为简约,新建三个 AnimationDrawable
,并为他充实每一帧的图样和持续时间就足以了。

//code
ImageView ivFrameCode = (ImageView) findViewById(R.id.iv_frame_code);
AnimationDrawable animationDrawable = new AnimationDrawable();
for (int i = 1; i <= 5; i++) {
    int id = getResources().getIdentifier("z_1_die_0" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    animationDrawable.addFrame(drawable,300);
}
ivFrameCode.setImageDrawable(animationDrawable);
    //循环播放
animationDrawable.setOneShot(false);
    //开始播放
animationDrawable.start();

功用如图所示:

普京网址 10

效果

效果

先看成效图:

补间动画

补间动画无须再知道动画进度中的每一帧了,只供给定义动画的上马和终止,况兼钦命变化的时光和办法就能够了,他会自行补全中间的历程。Android会通过所付出的始发值与停止值,再遵照中间变化的法规,最终计算出每一帧图片体现的功用,最后直接显示出来。

主要不外乎那多样为主职能:发光度变化 Alpha 、缩放变化 Scale 、 位移变化
Translate 、旋转换化 Rotate
。那四种功能能够动态构成,进而达成复杂的动画。

普京网址 11

普京网址 11

普京网址 13

插值器 Interpolator

补间动画能够和好补充中间的内容,其实靠的就是那么些。

Interpolator
会依照项目不一致,选取分化的算法总计出补间动画所急需动态插入的密度和职位,Interpolator
负担调节动画的转移速度,他得以 匀速、加速、减速、抛物线等各类转移。

public interface Interpolator extends TimeInterpolator {
    // A new interface, TimeInterpolator, was introduced for the new android.animation
    // package. This older Interpolator interface extends TimeInterpolator so that users of
    // the new Animator-based animations can use either the old Interpolator implementations or
    // new classes that implement TimeInterpolator directly.
}

public interface TimeInterpolator {

    /**
     * Maps a value representing the elapsed fraction of an animation to a value that represents
     * the interpolated fraction. This interpolated value is then multiplied by the change in
     * value of an animation to derive the animated value at the current elapsed animation time.
     *
     * @param input A value between 0 and 1.0 indicating our current point
     *        in the animation where 0 represents the start and 1.0 represents
     *        the end
     * @return The interpolation value. This value can be more than 1.0 for
     *         interpolators which overshoot their targets, or less than 0 for
     *         interpolators that undershoot their targets.
     */
    float getInterpolation(float input);
}

由地方的代码可以精晓的看来某个,Interpolator 只是一连于 TimeInterpolator
,里面只是一个空实现而已。而在 TimeInterpolator 下,也唯有 float
getInterpolation(float input); 多个艺术。input 是三个 0.0 ~ 1.0 的值 ,
经过自定义的方法 ,那么一旦回到适当的值,那么就能够促成各个的效劳。

比如上边是系统贯彻的先加快后减速的Interpolator。

AccelerateDecelerateInterpolator

 public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

自然Android SDK 中早就达成了多少个 Interpolator 让开拓者直接动用。

上边继续介绍动画,补间动画和逐帧动画一样,既可以使用XML完毕也能采纳Code达成。

XML的文书应放置在 res/anim 目录上。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章