iOS的果冻效果

具体使用的CADisplayLink和贝塞尔曲线

效果:

//
//  DisplayView.m
//  CustomAnimation
//
//  Created by LV on 16/1/6.
//  Copyright © 2016年 Wieye. All rights reserved.
//

#import "DisplayView.h"

@interface DisplayView ()

@property (nonatomic, strong) CADisplayLink * displayLink;

@property (nonatomic, assign) CGFloat to;
@property (nonatomic, assign) CGFloat from;

@end

@implementation DisplayView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        NSLog(@"Init");
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
     NSLog(@"DrawRect");

    [[UIColor purpleColor] setFill];
    CALayer *layer = self.layer.presentationLayer;
    CGFloat progress    = 1 - (layer.position.y - self.to) / (self.from - self.to);
    CGFloat height      = CGRectGetHeight(rect);
    CGFloat deltaHeight = height / 2 * (0.5 - fabs(progress - 0.5));
    CGPoint topLeft     = CGPointMake(0, deltaHeight);
    CGPoint topRight    = CGPointMake(CGRectGetWidth(rect), deltaHeight);
    CGPoint bottomLeft  = CGPointMake(0, height);
    CGPoint bottomRight = CGPointMake(CGRectGetWidth(rect), height);

    UIBezierPath* path = [UIBezierPath bezierPath];
    [path moveToPoint:topLeft];
    [path addQuadCurveToPoint:topRight controlPoint:CGPointMake(CGRectGetMidX(rect), 0)];
    [path addLineToPoint:bottomRight];
    [path addQuadCurveToPoint:bottomLeft controlPoint:CGPointMake(CGRectGetMidX(rect), height - deltaHeight)];
    [path closePath];
    [path fill];
}

#pragma mark - Public Action

- (void)startAnimationFrom:(CGFloat)from to:(CGFloat)to
{
    if (self.displayLink == nil)
    {
        NSLog(@"StartAnimation");

        self.from = from;
        self.to   = to;
        self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(tick:)];
        [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
    }

    [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options:0 animations:^{
        self.center = CGPointMake(self.center.x, self.to);
    } completion:^(BOOL finished)
     {
         [self stopAnimation];
     }];
}

- (void)stopAnimation
{
    if (self.displayLink != nil)
    {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
}

#pragma mark - Private Action

- (void)tick:(CADisplayLink *)displayLink
{
    [self setNeedsDisplay];
}

@end
#import <UIKit/UIKit.h>

@interface DisplayView : UIView

- (void)startAnimationFrom:(CGFloat)from to:(CGFloat)to;

- (void)stopAnimation;

@end
时间: 2024-10-12 17:12:23

iOS的果冻效果的相关文章

iOS - 用 UIBezierPath 实现果冻效果

最近在网上看到一个很酷的下拉刷新效果(http://iostuts.io/2015/10/17/elastic-bounce-using-uibezierpath-and-pan-gesture/).自己试着实现了一下其中的果冻回弹效果. 效果 DEMO 由于文笔不太好-.- ,建议先下载demo,再结合下面的分析,会好理解点.地址https://github.com/Resory/RYCuteView 逻辑 下图p1,蓝色部分图形是一个CAShapeLayer,他的形状由UIBezierPat

转:谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu.用到的核心技术是CAKeyframeAnimation,然后设置几个不同

iOS开发——图形编程OC篇&amp;粘性动画以及果冻效果

粘性动画以及果冻效果 在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu. 用到的核心技术是CAKeyframeAnimat

谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: https://github.com/KittenYang/KYAnimatedPageControl 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项

实现ios常见菜单效果的思路

目前见过的实现边侧菜单的效果,比较流行的有以下三种:(效果图) 1.菜单栏覆盖在部分主视图上 附上实现该效果的一个不错的源码地址: http://code4app.com/ios/RNFrostedSidebar/524399706803fa3c33000001 (1)最开始要实现这个效果,我想最简单的方式就是:添加UIView,加上一个self.view大小的子视图,菜单列表以外的区域设为透明灰色.后来发现,如果当前的控制器有显示导航栏或者工具栏,这个子视图就无法遮盖住导航栏或者工具栏上面的按

iOS的动画效果类型及实现方法

实现iOS漂亮的动画效果主要有两种方法, 一种是UIView层面的, 一种是使用CATransition进行更低层次的控制, 第一种是UIView,UIView方式可能在低层也是使用CATransition进行了封装,它只能用于一些简单的.常用的效果展现,这里写一个常用的示例代码,供大家参考. [UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:0.75]; [UIView se

使用CADisplayLink实现果冻效果动画(学习于Glow 技术团队)

使用CADisplayLink实现果冻效果动画 CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display. github 1.定义一个View @interfaceJellyView() @property (strong,nonatomic)CADisplayLink *displayLink;

ios各种动画效果

ios各种动画效果 最普通动画: //开始动画 [UIView beginAnimations:nil context:nil];  //设定动画持续时间 [UIView setAnimationDuration:2]; //动画的内容 frame.origin.x += 150; [img setFrame:frame]; //动画结束 [UIView commitAnimations]; 连续动画:一个接一个地显示一系列的图像 NSArray *myImages = [NSArray arr

iOS星级评分效果实现

原文链接: iOS星级评分效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158