9159金沙游艺场

图片 2
c#对文件的读写
图片 49
Flutter在Windows平台下的安装配置

【iScroll源码学习04】分离IScroll核心

一、先看看效果

  寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了。回来第一件事就是改了项目的一个bug,最近又新增了一个新的功能,为程序添加了一个消息栏。消息栏有许多形式,要求是一个不需要历史记录,可以用鼠标选中消息内容的消息栏。我首先想到的就是TextBox,我个人比较喜欢美观的,有点强迫症,所以必须把TextBox中的ScrollViewer给改写了,好吧,开始。

前言

最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了

  • 1.
    【iScroll源码学习03】iScroll事件机制与滚动条的实现
  • 2.
    【iScroll源码学习02】分解iScroll三个核心事件点
  • 3.
    【iScroll源码学习01】准备阶段
  • 4.
    【iScroll源码学习00】模拟iScroll

我们学习源码的目的绝不是学习人家的源码,而是由高手的代码里面学习思想,或者研究解决方案,就拿我们这次学习iScroll,我的目的就是

“抄袭”,我今天就针对自己的需求来抄袭iScroll的源码,组成自己的库,然后用于项目,然后高高兴兴的装B…….

图片 1

  本博文分为三个部分,第一部分将描述如何改写TextBox的布局,第二部分则描述如何改写TextBox中的ScrollViewer样式,第三部分则是对自定义样式时产生的不明问题进行修补。

关系图

图片 2

 

  一、生成自定义TextBox控件

工具类

第一,我们将iScroll的工具类搬离出来,但是我们系统是一定支持CSS3动画的,所以requestAnimationFrame方法我们就不予理睬了

第二,因为我们的系统是依赖于zepto的,甚至还用到了backbone(但是backbone与underscore大有被移除的可能,所以只用zepto就好)

 

  还是把这次写的消息框做成用户控件的形式,首先,前台简单的XAML:

属性总览

二、原理

图片 3图片 4消息框基础XAML

_elementStyle

用于后面检测CSS3 兼容属性

  虽然效果很简单,但是网上的一些资料涉及的代码量非常可观,而且效果也不是很理想,滚动的时候没有一个顺滑感。我这里提供的源码一共120多行,就能实现上图的效果。

 1 <TextBox x:Class="FS.PresentationManagement.Controls.MessageTextBox"
 2          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="SkyBlue">
 4     <TextBox.Template>
 5         <ControlTemplate TargetType="{x:Type TextBox}">
 6             <Grid Background="{TemplateBinding Background}">
 7                 <Grid.ColumnDefinitions>
 8                     <ColumnDefinition />
 9                     <ColumnDefinition Width="62" />
10                 </Grid.ColumnDefinitions>
11                 <!-- 文本框 -->
12                 <ScrollViewer x:Name="PART_ContentHost">
13                     <!-- 暂时省略 -->
14                 </ScrollViewer>
15                 <!-- 按钮 -->
16                 <Button Name="BTN_Clear" Margin="5" Grid.Column="1" Click="BTN_Clear_Click">
17                     <Button.Template>
18                         <ControlTemplate>
19                             <Image Name="IMG_Clear" Source="../Pic/clear.png"/>
20                             <ControlTemplate.Triggers>
21                                 <Trigger Property="IsMouseOver" Value="True">
22                                     <Setter TargetName="IMG_Clear" Property="Source" Value="../Pic/clear2.png" />
23                                 </Trigger>
24                                 <Trigger Property="Button.IsPressed" Value="True">
25                                     <Setter TargetName="IMG_Clear" Property="Source" Value="../Pic/clear3.png" />
26                                 </Trigger>
27                             </ControlTemplate.Triggers>
28                         </ControlTemplate>
29                     </Button.Template>
30                 </Button>
31                 <Button Name="BTN_Close" Margin="0,-18,-25,0" VerticalAlignment="Top" Width="32" Height="32" Grid.Column="1" Click="BTN_Close_Click">
32                     <Button.Template>
33                         <ControlTemplate>
34                             <Image Name="IMG_Close" Source="../Pic/close.png" />
35                             <ControlTemplate.Triggers>
36                                 <Trigger Property="IsMouseOver" Value="True">
37                                     <Setter TargetName="IMG_Close" Property="Source" Value="../Pic/close2.png" />
38                                 </Trigger>
39                                 <Trigger Property="Button.IsPressed" Value="True">
40                                     <Setter TargetName="IMG_Close" Property="Source" Value="../Pic/close3.png" />
41                                 </Trigger>
42                             </ControlTemplate.Triggers>
43                         </ControlTemplate>
44                     </Button.Template>
45                 </Button>
46             </Grid>
47         </ControlTemplate>
48     </TextBox.Template>
49 </TextBox>

_vendor

CSS3 兼容前缀

  本质上我们只要接管ScrollViewer的滚动逻辑,并且把这个逻辑替换成带有惯性的即可,那么如何去接管呢?这里的关键是先屏蔽ScrollViewer的鼠标滚轮事件:

  这个时候框架大概是,左边将是一个ScrollViewer,用来显示消息,右边则是关闭和清理,两个按钮,至于按钮的样式,也已经进行了更改,每个按钮使用三张图片来表示原始、停靠、按下三种状态,需要注意,上面的XAML中按钮的Source路径是像“../Pic/xxx.png”,这是我把图片放到了当前文件的—>上级目录的—>Pic目录下,所以实际上大家在使用的时候需要把这个属性改成图片所在路径。

hasTouch

是否支持touch事件

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3      e.Handled = true;
4 }

  后台代码此时也非常简单,只是简单地继承了TextBox控件:

style

几个CSS3 动画属性,比如在chrome下面是这样的

Object {
transform: "webkitTransform", 
transitionTimingFunction: "webkitTransitionTimingFunction",
transitionDuration: "webkitTransitionDuration",
transitionDelay: "webkitTransitionDelay", 
transformOrigin: "webkitTransformOrigin"
}

  这样一来,ScrollViewer就不会响应滚轮事件了,我们就在这里做文章。首先我们给这个ScrollViewer添加一个属性 IsEnableInertia ,用来控制是否使用惯性,因为萝卜青菜各有所爱,不要想着强制所有人使用惯性,所以滚轮响应方法变为:

图片 5图片 6消息框基础C#

eventType

touch事件的话值就是1,mouse事件便是2,这个对后面有影响的

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3     if (!IsEnableInertia)
4     {
5         base.OnMouseWheel(e);
6         return;
7     }
8     e.Handled = true;
9 }    
 1 namespace FS.PresentationManagement.Controls
 2 {
 3     /// <summary>
 4     /// 文本消息框控件
 5     /// </summary>
 6     public partial class MessageTextBox : TextBox
 7     {
 8         public MessageTextBox()
 9         {
10             InitializeComponent();        
11         }
12     }
13 }

ease

这个是CSS3的动画参数,会形成动画曲线,各位自己去看吧

  控制ScrollViewer的垂直滚动可以使用 ScrollViewer.ScrollToVerticalOffset ,横向也一样。为什么不能用 VerticalOffset ?因为 VerticalOffset 在注册的时候就说明了是只读的:

  此时的效果如图所示:图片 7  看起来还不错吧,右上角的关闭按钮由于截图原因不是很清晰,稍后我们可以看到完整版的要好一些。

_prefixStyle

会用到的私有方法,会返回CSS3兼容前缀

1 private static readonly DependencyPropertyKey VerticalOffsetPropertyKey = DependencyProperty.RegisterReadOnly(nameof (VerticalOffset), typeof (double), typeof (ScrollViewer), (PropertyMetadata) new FrameworkPropertyMetadata((object) 0.0));
2 
3 public static readonly DependencyProperty VerticalOffsetProperty = ScrollViewer.VerticalOffsetPropertyKey.DependencyProperty;

  二、改造ScrollViewer控件

getTime

获取当前时间戳

  好了,接下来就是怎么在滚轮响应方法中实现惯性运动了,也就是一种减速运动。想到这儿,熟悉动画的博友很快就知道要用WPF的动画来实现了,默认的动画都是一次线性的,要有惯性效果就得用缓动函数,WPF的缓动函数有很多,而 CubicEase 非常适合用来做惯性,它的描述图如下:

  下面介绍本文的核心,如何自定义ScrollViewer控件,当然,我们的目标也不是把它改成什么奇葩,只是想把滚动条变得漂亮一点而已。如果使用WPF比较多的朋友会知道,许多控件都是由很多层一层一层地叠加形成可视化树的,ScrollViewer也不例外,现在通过Template属性可以完全自己定义其结构。

addEvent

为dom绑定事件,注意其中的fn是对象,具体处理在handleEvent里面

图片 8

  要进行改造的ScrollViewer控件就位于第一部分XAML代码中的省略部分,我现在只贴出这部分代码:

removeEvent

为dom注销事件,注意其中的fn是对象,具体处理在handleEvent里面

  图中,横轴表示时间,纵轴表示运动距离。很明显,中间的 EaseOut 模式就是我们想要的。到了这里思路就清晰了,我们可以定义一个属性 CurrentVerticalOffset ,我们会在它上面实现动画,在它的值回调函数中调用 ScrollViewer.ScrollToVerticalOffset 来更新ScrollViewer的滚动位置。当然我们还需要一个私有字段 _totalVerticalOffset ,这个是用来存放ScrollViewer滚动目标位置的,滚轮向下滚动一个单位我们就给它减去一次 e.Delta ,这里的e是滚轮响应方法传进来的参数,每次给它赋值之后,就可以在 CurrentVerticalOffset 上执行动画了: BeginAnimation(CurrentVerticalOffsetProperty,
animation) ,需要特别注意的是,当一个依赖属性用了动画改变后,再对其赋值则不会生效,原因是在一个动画到达活动期的终点后,时间线默认会保持其进度,直到其父级的活动期和保持期结束为止。如果想在动画结束后还可以手动更改依赖属性的值,则需要把 FillBehavior 设置为Stop。不过这样又会出现一个问题,一旦动画结束,这个依赖属性又会恢复初始值,所以还要给这个动画订阅一个 Completed 事件,在事件响应方法中为 CurrentVerticalOffset 给定目标值,也就是 _totalVerticalOffset 。

图片 9图片 10自定义ScrollViewer模版

momentum

这个对象中最难的一个BUG,也很重要,他会根据我们的拖动返回运动的长度与耗时,这个是根据物理公式计算而出的,十分靠谱,哥是没看懂用什么公式的

  最后还有一个冲突问题,当手动拖动滑块或者当用上下文菜单改变滚动条位置时是不能用动画的,因为这时候没有触发 OnMouseWheel ,没关系,这正是我们想要的,但是如果再次触发 OnMouseWheel 就有问题了,因为手动触发滚动的时候我们没有给 CurrentVerticalOffset 和 _totalVerticalOffset 赋值( CurrentVerticalOffset 和 _totalVerticalOffset 只在 OnMouseWheel 中赋值),所以在用动画执行滚动操作前要先判断一下是否需要先更新一下它们俩,如何判断?我们可以用一个私有字段 _isRunning 来维护状态,每当动画开始就给它赋值true,结束则赋值false。这样一来,当 _isRunning = false 时,说明在调用 OnMouseWheel 前,动画已经结束,用户可能已经手动改变了滚动条位置(也可能没有,但这并不影响),所以就要给之前俩兄弟更新一下值了。

  1 <ScrollViewer x:Name="PART_ContentHost">
  2     <ScrollViewer.Template>
  3         <ControlTemplate TargetType="{x:Type ScrollViewer}">
  4             <Grid Background="{Binding Path=ScrollViewerBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}">
  5                 <Grid.ColumnDefinitions>
  6                     <ColumnDefinition />
  7                     <ColumnDefinition Width="Auto"/>
  8                 </Grid.ColumnDefinitions>
  9                 <Grid.RowDefinitions>
 10                     <RowDefinition/>
 11                     <RowDefinition Height="Auto"/>
 12                 </Grid.RowDefinitions>
 13                 <ScrollContentPresenter Margin="5,5,0,5" />
 14                 <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}">
 15                     <ScrollBar.Template>
 16                         <ControlTemplate TargetType="{x:Type ScrollBar}">
 17                             <!-- 竖向滚动条宽度 -->
 18                             <Grid Width="10">
 19                                 <Grid.RowDefinitions>
 20                                     <RowDefinition Height="1" />
 21                                     <RowDefinition />
 22                                     <RowDefinition Height="1" />
 23                                 </Grid.RowDefinitions>
 24                                 <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
 25                                     <Track.DecreaseRepeatButton>
 26                                         <!--上空白-->
 27                                         <RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0.5">
 28                                             <RepeatButton.Template>
 29                                                 <ControlTemplate>
 30                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5,5,0,0" />
 31                                                 </ControlTemplate>
 32                                             </RepeatButton.Template>
 33                                         </RepeatButton>
 34                                     </Track.DecreaseRepeatButton>
 35                                     <Track.Thumb>
 36                                         <!--滑块-->
 37                                         <Thumb>
 38                                             <Thumb.Template>
 39                                                 <ControlTemplate>
 40                                                     <Border Background="{Binding Path=ScrollBarForeground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5" />
 41                                                 </ControlTemplate>
 42                                             </Thumb.Template>
 43                                         </Thumb>
 44                                     </Track.Thumb>
 45                                     <Track.IncreaseRepeatButton>
 46                                         <!--下空白-->
 47                                         <RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0.5">
 48                                             <RepeatButton.Template>
 49                                                 <ControlTemplate>
 50                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="0,0,5,5" />
 51                                                 </ControlTemplate>
 52                                             </RepeatButton.Template>
 53                                         </RepeatButton>
 54                                     </Track.IncreaseRepeatButton>
 55                                 </Track>
 56                             </Grid>
 57                         </ControlTemplate>
 58                     </ScrollBar.Template>
 59                 </ScrollBar>
 60                 <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}">
 61                     <ScrollBar.Template>
 62                         <ControlTemplate TargetType="{x:Type ScrollBar}">
 63                             <!-- 横向滚动条高度 -->
 64                             <Grid Height="10">
 65                                 <Grid.ColumnDefinitions>
 66                                     <ColumnDefinition Width="1" />
 67                                     <ColumnDefinition />
 68                                     <ColumnDefinition Width="1" />
 69                                 </Grid.ColumnDefinitions>
 70                                 <Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
 71                                     <Track.DecreaseRepeatButton>
 72                                         <!--左空白-->
 73                                         <RepeatButton Command="ScrollBar.PageLeftCommand" Opacity="0.5">
 74                                             <RepeatButton.Template>
 75                                                 <ControlTemplate>
 76                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5,0,0,5" />
 77                                                 </ControlTemplate>
 78                                             </RepeatButton.Template>
 79                                         </RepeatButton>
 80                                     </Track.DecreaseRepeatButton>
 81                                     <Track.Thumb>
 82                                         <!--滑块-->
 83                                         <Thumb>
 84                                             <Thumb.Template>
 85                                                 <ControlTemplate>
 86                                                     <Border Background="{Binding Path=ScrollBarForeground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5" />
 87                                                 </ControlTemplate>
 88                                             </Thumb.Template>
 89                                         </Thumb>
 90                                     </Track.Thumb>
 91                                     <Track.IncreaseRepeatButton>
 92                                         <!--右空白-->
 93                                         <RepeatButton Command="ScrollBar.PageRightCommand" Opacity="0.5">
 94                                             <RepeatButton.Template>
 95                                                 <ControlTemplate>
 96                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="0,5,5,0" />
 97                                                 </ControlTemplate>
 98                                             </RepeatButton.Template>
 99                                         </RepeatButton>
100                                     </Track.IncreaseRepeatButton>
101                                 </Track>
102                             </Grid>
103                         </ControlTemplate>
104                     </ScrollBar.Template>
105                 </ScrollBar>
106             </Grid>
107         </ControlTemplate>
108     </ScrollViewer.Template>
109 </ScrollViewer>

样式兼容

于是我们开始吧,首先,因为各个浏览器问题,我们需要做CSS3动画的兼容

 1 var _elementStyle = document.createElement('div').style;
 2 //获得CSS3前缀
 3 var _vendor = (function () {
 4   var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'];
 5   var transform;
 6   var i = 0;
 7   var l = vendors.length;
 8 
 9   for (; i < l; i++) {
10     transform = vendors[i] + 'ransform';
11     if (transform in _elementStyle) return vendors[i].substr(0, vendors[i].length - 1);
12   }
13   return false;
14 })();

这句代码会返回需要做兼容的CSS属性的前缀,然后提供一个方法特别的干这个事情:

1 //获取样式(CSS3兼容)
2 function _prefixStyle(style) {
3   if (_vendor === false) return false;
4   if (_vendor === '') return style;
5   return _vendor + style.charAt(0).toUpperCase + style.substr(1);
6 }

  因为常见的惯性滚动以垂直方向居多,所以我没有写水平方向的逻辑,但也很容易扩展,有兴趣的博友可以下载源代码自己研究。

  对应的后台依赖属性:

获取当前时间戳

获得当前时间戳这个方法比较简单,这个会在计算动画用到:

me.getTime = Date.now || function getTime() { return new Date().getTime(); };

 

图片 11图片 12ScrollViewer的后台依赖属性

动画数据

 1 me.momentum = function (current, start, time, lowerMargin, wrapperSize) {
 2       var distance = current - start,
 3         speed = Math.abs(distance) / time,
 4         destination,
 5         duration,
 6         deceleration = 0.0006;
 7 
 8       destination = current + (speed * speed) / (2 * deceleration) * (distance < 0 ? -1 : 1);
 9       duration = speed / deceleration;
10 
11       if (destination < lowerMargin) {
12         destination = wrapperSize ? lowerMargin - (wrapperSize / 2.5 * (speed / 8)) : lowerMargin;
13         distance = Math.abs(destination - current);
14         duration = distance / speed;
15       } else if (destination > 0) {
16         destination = wrapperSize ? wrapperSize / 2.5 * (speed / 8) : 0;
17         distance = Math.abs(current) + destination;
18         duration = distance / speed;
19       }
20 
21       return {
22         destination: Math.round(destination),
23         duration: duration
24       };
25     };

这个方法尤其关键,是iScroll动画平滑的一大功臣,这个方法内部用到了物理一个计算速度的公式,我可耻的忘了是什么了,这里直接不予关注了,解释下参数即可

current:当前鼠标位置
start:touchStart时候记录的Y(可能是X)的开始位置,但是在touchmove时候可能被重写
time: touchstart到手指离开时候经历的时间,同样可能被touchmove重写
lowerMargin:y可移动的最大距离,这个一般为计算得出 this.wrapperHeight - this.scrollerHeight
wrapperSize:如果有边界距离的话就是可拖动,不然碰到0的时候便停止

这个动画方法,我们后面用到还需要再说下

三、源码

 1         /// <summary>
 2         /// 滚动框背景
 3         /// </summary>
 4         public Brush ScrollViewerBackground
 5         {
 6             get { return (Brush)GetValue(ScrollViewerBackgroundProperty); }
 7             set { SetValue(ScrollViewerBackgroundProperty, value); }
 8         }
 9         public static readonly DependencyProperty ScrollViewerBackgroundProperty =
10             DependencyProperty.Register("ScrollViewerBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.LightBlue));
11 
12         /// <summary>
13         /// 滚动条前景
14         /// </summary>
15         public Brush ScrollBarForeground
16         {
17             get { return (Brush)GetValue(ScrollBarForegroundProperty); }
18             set { SetValue(ScrollBarForegroundProperty, value); }
19         }
20         public static readonly DependencyProperty ScrollBarForegroundProperty =
21             DependencyProperty.Register("ScrollBarForeground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.RoyalBlue));
22 
23         /// <summary>
24         /// 滚动条背景
25         /// </summary>
26         public Brush ScrollBarBackground
27         {
28             get { return (Brush)GetValue(ScrollBarBackgroundProperty); }
29             set { SetValue(ScrollBarBackgroundProperty, value); }
30         }
31         public static readonly DependencyProperty ScrollBarBackgroundProperty =
32             DependencyProperty.Register("ScrollBarBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.WhiteSmoke));

属性检测

图片 13图片 14

 1 //我们暂时只判断touch 和 mouse即可
 2 me.extend(me.style = {}, {
 3   hasTouch: 'ontouchstart' in window,
 4   transform: _prefixStyle('transform'),
 5   transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
 6   transitionDuration: _prefixStyle('transitionDuration'),
 7   transitionDelay: _prefixStyle('transitionDelay'),
 8   transformOrigin: _prefixStyle('transformOrigin')
 9 });
10 
11 me.extend(me.eventType = {}, {
12   touchstart: 1,
13   touchmove: 1,
14   touchend: 1,
15 
16   mousedown: 2,
17   mousemove: 2,
18   mouseup: 2
19 });
20 
21 me.extend(me.ease = {}, {
22   quadratic: {
23     style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
24     fn: function (k) {
25       return k * (2 - k);
26     }
27   },
28   circular: {
29     style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
30     fn: function (k) {
31       return Math.sqrt(1 - (--k * k));
32     }
33   },
34   back: {
35     style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
36     fn: function (k) {
37       var b = 4;
38       return (k = k - 1) * k * ((b + 1) * k + b) + 1;
39     }
40   },
41   bounce: {
42     style: '',
43     fn: function (k) {
44       if ((k /= 1) < (1 / 2.75)) {
45         return 7.5625 * k * k;
46       } else if (k < (2 / 2.75)) {
47         return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
48       } else if (k < (2.5 / 2.75)) {
49         return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
50       } else {
51         return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
52       }
53     }
54   },
55   elastic: {
56     style: '',
57     fn: function (k) {
58       var f = 0.22,
59         e = 0.4;
60 
61       if (k === 0) { return 0; }
62       if (k == 1) { return 1; }
63 
64       return (e * Math.pow(2, -10 * k) * Math.sin((k - f / 4) * (2 * Math.PI) / f) + 1);
65     }
66   }
67 });

View Code

ease时动画平滑度相关的东西,我们暂时用着,后面看看可以用zepto或者CSS3默认的属性以减少代码量,工具类到此为止

  本文所讨论的控件源码已经在github开源:

  在构造前台界面时,首先,定义了一个Grid做为容器,并把它分成了四份,分别是内容、竖向滚动条、横向滚动条、空白。其中,内容位于0行、0列,使用ScrollContentPresenter来表示将要显示的内容;竖向滚动条位于0行1列,使用ScrollBar来表示;横向滚动条位于1行0列,使用横向(Orientation=”Horizontal”)的ScrollBar来表示。

IScroll

IScroll类是我们的关键,贯穿其中的是两个事件机制:

① 原生的touch(鼠标)事件

② 系统自建的异步事件模型

起始点是touchstart,其中的动画又有很多开关,我们下面会慢慢涉及到,这里先说下他的简单属性

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图