GithubHelp home page GithubHelp logo

hanhailong / kyanimatedpagecontrol Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kittenyang/kyanimatedpagecontrol

0.0 1.0 0.0 936 KB

A custom UIPageControl with multiple animations

License: MIT License

Objective-C 86.18% Ruby 13.82%

kyanimatedpagecontrol's Introduction

KYAnimatedPageControl

CocoaPods Version License Platform

##Intro

A custom UIPageControl with multiple animations. With two animation styles:

(自定义的UIPageControl。拥有两种动画样式:)

  • GooeyCircle

  • 粘性小球

gooeyCircle

Detail 细节

The longer distance the bubble moves , the severer gooey effect it has.

粘性小球会根据移动距离的大小拥有不同的弹性程度。移动距离越大,弹性效果越明显。


  • RotateRect
  • 旋转方块

rotateRect

You can not only scroll the UIScrollView subclasses such as UICollectionView ,UITableView and the KYAnimatedPageControl can automatically move with animation ,but also you can just TAP the target page in the KYAnimatedPageControl,and the scrollview will also automatically and intelligently scroll to the target position.

KYAnimatedPageControl 不仅可以在你滑动UIScrollView的时候自动以动画的形式移动,而且你还可以直接在KYAnimatedPageControl上的点击要滚动到的目标页,此时除了KYAnimatedPageControl会以动画的形式移动,UIScrollView会很智能地滑到目标页面。


##Blog

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

##Installation

pod 'KYAnimatedPageControl', '~> 1.0.5'

##Usage

  • Initialize:
    self.pageControl = [[KYAnimatedPageControl alloc]initWithFrame:CGRectMake(20, 450, 280, 50)];
    self.pageControl.pageCount = 8;
    self.pageControl.unSelectedColor = [UIColor colorWithWhite:0.9 alpha:1];
    self.pageControl.selectedColor = [UIColor redColor];
    self.pageControl.bindScrollView = self.demoCollectionView;
    self.pageControl.shouldShowProgressLine = YES;
    
    self.pageControl.indicatorStyle = IndicatorStyleGooeyCircle;
    self.pageControl.indicatorSize = 20;
    [self.view addSubview:self.pageControl];
  • Must implement methods in UIScrollViewDelegate:
#pragma mark -- UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    //Indicator动画
    [self.pageControl.indicator animateIndicatorWithScrollView:scrollView andIndicator:self.pageControl];

    if (scrollView.dragging || scrollView.isDecelerating || scrollView.tracking) {
        //背景线条动画
        [self.pageControl.pageControlLine animateSelectedLineWithScrollView:scrollView];
    }
    
}


-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    
    self.pageControl.indicator.lastContentOffset = scrollView.contentOffset.x;
    
}

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{

    
    [self.pageControl.indicator restoreAnimation:@(1.0/self.pageControl.pageCount)];

}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    self.pageControl.indicator.lastContentOffset = scrollView.contentOffset.x;
}

##版本 ##Version

###v1.0.5

  • 取消-(void)display方法的显式调用,使用更简单。
  • fix a bug of didSelectIndexBlock

###v1.0.4

  • 增加点击某个Index的回调。

###v1.0.3

  • 取消方块的结束抖动效果(需要可打开注释的代码)
  • 改进判断滑动方向的算法。由之前的(当前contentOffset.x - 上一次的contentOffset.x)来判断方向,改成现在的(当前contentOffset.x - 上一次的contentOffset.x)是否划过一半来判断方向。
  • 增加UIPanGesture。现在可以拖动Indicator了,小球会跟着你的手指跑了。通过新增的@property(nonatomic,assign)BOOL swipeEnable; 接口可以选择是否开启拖动手势。
  • 增加一个接口方法。调用可以快速跳到目标页而不用点击。 -(void)animateToIndex:(NSInteger)index;

###v1.0.2

  • 增加旋转方块的抖动效果

###v1.0.1

  • 增加粘性小球样式

###v1.0.0

  • 第一次提交:完成旋转方块样式

##License This project is under MIT License. See LICENSE file for more information.

kyanimatedpagecontrol's People

Contributors

kimdarren avatar kittenyang avatar zsk425 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.