美文网首页
录像时间轴 TimeAxis

录像时间轴 TimeAxis

作者: Daniel_King | 来源:发表于2018-11-16 11:16 被阅读0次

录像时间轴 TimeAxis

  • 录像时间轴,无限滚动
  • 可扩展自定义绘制方法
  • 使用物理引擎UIDynamic模拟实现UIScrollView的滚动减速效果
  • 提供丰富的回调反馈,可以详细查看DHTimeAxisDelegate

快速集成

pod 'TimeAxis'
or
$git clone https://github.com/DanielHusx/TimeAxis.git

使用示例

#import <DHTimeAxis.h>
    /**
    DHTimeAxisAppearance是个单例类,用于控制外观属性,具体属性请查看该类
    其中属性rendererClass 必须是继承DHTimeAxisRenderer的子类,
    它是能够使用DHTimeAxisAppearance属性进行绘制的类,具体使用方式可以参照DHTimeAxisGearRenderer或DHTimeAxisRuleRenderer的实现
    */
    [DHTimeAxisAppearance renderGearAppearanceWithDirection:DHAxisDirectionHorizontal];
    DHTimeAxis *axis = [[DHTimeAxis alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height/2.0-100, self.view.frame.size.width, 100)];
    [self.view addSubview:axis];

丰富的回调

@class DHTimeAxis;
@protocol DHTimeAxisDelegate <NSObject>
@optional
/// 更新当前时间
- (void)timeAxis:(DHTimeAxis *)timeAxis didChangedTimeInterval:(NSTimeInterval)currentTimeInterval;
/// 更新放缩比例
- (void)timeAxis:(DHTimeAxis *)timeAxis didChangedScale:(CGFloat)currentScale;
/// 停止的位置存在数据
- (void)timeAxis:(DHTimeAxis *)timeAxis didEndedAtDataSection:(DHTimeAxisData *)aAxisData;
/// 开始滚动
- (void)timeAxisDidBeginScrolling:(DHTimeAxis *)timeAxis;
/// 结束滚动
- (void)timeAxisDidEndScrolling:(DHTimeAxis *)timeAxis;
/// 开始捏合手势
- (void)timeAxisDidBeginPinching:(DHTimeAxis *)timeAxis;
/// 结束捏合手势
- (void)timeAxisDidEndPinching:(DHTimeAxis *)timeAxis;
/**
 外部提供偏移当前时间参数 的计算方法
 @param offset 手势造成的偏移
 @param viewSize 视图长宽
 @param opOffset 计算后的偏移值
 @param opViewSize 计算后的尺寸
 */
- (void)translationCurrentTimeIntervalFromOffset:(CGPoint)offset viewSize:(CGSize)viewSize toOptimisticOffset:(CGFloat *)opOffset optimisticViewSize:(CGFloat *)opViewSize;
@end

绘制方法:

自定义绘制方法只需要三步:

  1. 继承DHTimeAxisRenderer类并实现如下方法,具体实现内容可以参考DHTimeAxisGearRenderer类和DHTimeAxisRuleRenderer类
/// 绘制数据
- (void)visitTimeAxisData:(DHTimeAxisData *)aTimeAxisData;
/// 绘制刻度线
- (void)visitTimeAxisRule:(DHTimeAxisRule *)aTimeAxisRule;
/// 绘制基线
- (void)visitTimeAxisBaseLine:(DHTimeAxisBaseLine *)aTimeAxisBaseLine;
/// 绘制数字与分割线
- (void)visitTimeAxisDigitalDivision:(DHTimeAxisDigitalDivision *)aTimeAxisDigitalDivision;
/// 绘制背景
- (void)visitTimeAxisBackground:(DHTimeAxisBackground *)aTimeAxisBackground;


// 另外需要根据对应数据更新的话,可继承如下方法,务必调用super
- (void)updateValueWithTimeAxisRule:(DHTimeAxisRule *)aTimeAxisRule;
- (void)updateValueWithTimeAxisBaseLine:(DHTimeAxisBaseLine *)aTimeAxisBaseLine;
- (void)updateValueWithTimeAxisDigitalDivision:(DHTimeAxisDigitalDivision *)aTimeAxisDigitalDivision;
- (void)updateValueWithTimeAxisBackground:(DHTimeAxisBackground *)aTimeAxisBackground;
  1. 设置[DHTimeAxisAppearance sharedAppearance].rendererClass为自定义类名
  2. 调用更新DHTimeAxis的更新方法
// 更新方法
[timeAxis updateAppearance];

效果图

DHTimeAxisGearRenderer

GearExample.png

DHTimeAxisRuleRenderer

RuleExample.png

相关文章

  • 录像时间轴 TimeAxis

    录像时间轴 TimeAxis 录像时间轴,无限滚动 可扩展自定义绘制方法 使用物理引擎UIDynamic模拟实现U...

  • 小程序 自定义 时间轴组件

    新鲜出炉 自定义时间轴组件 拿过去用吧!timeAxis.js timeAxis.wxml timeAxis.w...

  • 录像

    今天虽没有早自习,但想到第一节课要去听一位老教师的课,便早早的起床了,八点十分到校,回办公室整理好东西就去听...

  • 录像

    昨天学校里录像了,不过没有录好,今天重新录。语文老师说我们必须要精精神神的也要穿好秋季校服。 口号也变...

  • 51个css时间轴

    51个纯css时间轴 51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到java...

  • 录像与录像装置的区别

    录像: 用光学、电磁等方法把图像记录下来,也指记录下来的图像。 录像装置: 是一种使用光学原理来纪录影像的装置。摄...

  • 录像与录像装置的区别

    录像艺术是一种简单的定义为“以影像或声音为制作素材的媒体艺术”,它的名称是为了突出最早实现记录的媒介——录像带,以...

  • LiveQing私有云流媒体-云端录像时间轴视频及列表视图

    LiveQing云端直播点播流媒体软件: 提供设备接入; RTMP推流服务、RTMP分发、HLS分发、HTTP-F...

  • 看录像

    小时候,一个夏天的午后,我们一帮小孩到村上的一户张姓人家看录像。张姓人家的男主人公,我们那时不知道他叫什么...

  • 录像功能

    http://blog.csdn.net/amydom/article/details/52778244

网友评论

      本文标题:录像时间轴 TimeAxis

      本文链接:https://www.haomeiwen.com/subject/canpfqtx.html