SliderComponent

SliderComponent 可以帮你创建一个完全可自定义化的滑块，最常见的是 APP 中的音量调节器。你可以将它和其他图层关联起来，调整其它图层的数值属性（尺寸、位置等）。它是由三个图层组成的：滑槽（就是滑块本身 SliderComponent ），填充区 fill 和调节把手 knob 。

The SliderComponent creates a fully customisable slider for you. With it, you can adjust any numeric value or layer property. It consists of three layers: the slider itself, the fill and the knob.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()

滑块组件的滑槽默认是浅灰色的带圆角的矩形条，填充区——也即划过的区域——是深灰色的。填充区的圆角和滑槽slider是相互关联的，所以只用给它们之一设置圆角。

By default, the slider has a dark fill color, a light-gray backgroundColor and rounded corners with borderRadius. The radius of the fill automatically matches with that of the slider, so you only need to set it once.

  1. # Customize the appearance 
  2. slider.backgroundColor = "#ddd"
  3. slider.borderRadius = 4

slider.knob <layer>

滑块组件的调节把手。默认情况下，它是一个带着浅浅投影的圆形图层。

The knob of the slider. By default, it’s made circular using borderRadius and has a little bit of a drop shadow applied to it.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Customize the appearance 
  6. slider.knob.shadowY = 2
  7. slider.knob.shadowBlur = 4
  8. slider.knob.borderRadius = 6

调节把手是可以拖动的，并且带着动量模拟。

The knob is a draggable layer, with momentum enabled.

  1. # Disable momentum 
  2. slider.knob.draggable.momentum = false

slider.knobSize <number>

调节把手的尺寸，它可以自动调节把手的宽和高，默认值是 30 。

The size of the knob. This automatically sets the width and height of the knob. The default value is 30.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Change the size of the knob 
  6. slider.knobSize = 40

slider.fill <layer>

滑块组件的填充区域。它的宽度和高度是跟随着整个滑块组件的尺寸变化的，它的默认背景色是 #333 。

The fill of the slider. The width and height are automatically updated, based on the size of the slider. By default, its backgroundColor is set to #333.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Set the fill color to blue 
  6. slider.fill.backgroundColor = "#28affa"

slider.min <number>

滑块组件的最小值，默认是 0 。

The mininum value of the slider. Set to 0 by default.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Set the minimum value 
  6. slider.min = -1

slider.max <number>

滑块组件的最大值，默认是 1 。

The maximum value of the slider. Set to 1 by default.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Set the maximum value 
  6. slider.max = 2

slider.value <number>

滑块组件的初始值，默认是 0.5 。

The value of the slider. Set to 0.5 by default.

  1. # Create a SliderComponent  
  2. slider = new SliderComponent
  3. slider.center()
  5. # Print the current value 
  6. print slider.value

你可以通过 change:value 事件来监听任意改变的值，所以你可以通过这个事件来随时接收滑块组件的值，并将这个值映射到其它图层的属性上，比如通过滑块组件来调节一个图层的透明度。

You can listen to any value changes with the “change:value” event. This is useful for retreiving the value or mapping it to another layer property, like changing the opacity of a layer with the slider.

  1. slider.on "change:value", ->
  2.     print this.value

slider.pointForValue(value)

该方法可以将一个滑块组件当前的值转化为相对于整个组件的坐标（x）。比如有一个范围是 0 到 1 的滑块组件，pointForValue(0.5) 将会返回滑块组件的中间坐标，当它的宽度是 200 时，返回的值是 100 。

Takes a value and returns the corresponding point (x) within the slider. With a slider ranging from 0 to 1, the pointForValue(0.5) will be the center of the slider. With a width of 200, this will return 100.

  1. # Create a SliderComponent 
  2. slider = new SliderComponent
  3.     width: 200
  5. slider.center()
  7. # Print the point for a value of 0.5 
  8. print slider.pointForValue(0.5)
  9. # Returns 100

slider.valueForPoint(value)

该方法和上面那个方法相反，是通过一个 x 坐标值来计算滑块的值。比如有一个宽度是 200 的滑块，那么当它的指的范围设定为 0 到 1 时，将会返回 0.5 。

Takes a point and returns the corresponding value of the slider. With a width of 200, the valueForPoint(100) will be the center of the slider. With a slider ranging from 0 to 1, this will return 0.5.

  1. # Create a SliderComponent 
  2. slider = new SliderComponent
  3.     width: 200
  5. slider.center()
  7. # Print the value for the point 100 
  8. print slider.valueForPoint(100)
  9. # Returns 0.5

slider.animateToValue(value, animationOptions)

自动动画过渡到一个特定值。

Automatically animate to a specific value.

参数

  • value — 一个处于滑块组件范围间的数字值。
  • animationOptions — 一个包含了动画曲线、时间、延迟和重复等属性的动画选项（可选）。
  1. # Create a SliderComponent 
  2. slider = new SliderComponent
  3. slider.center()
  5. # Animate to 1 
  6. slider.animateToValue(1)
  8. # Animate with a custom curve 
  9. slider.animateToValue(1, { curve: "spring(400,40,0)"})