I was trying to make the iOS 7 style list. I’m done with the whole thing but can’t get how to scroll smoothly through the list. Here’s the code.
Sometimes I want to stop at a point but it scrolls forcefully and sometimes it doesn’t scroll enough. Anyway I could get a balance between the two?
The part related to scrolling is in the touched function when touch.state Ends, I’m using Tweens to scroll, I’d appreciate if you could help me out in getting the values of the duration of the tween and how much to scroll. Thanks!
--# RollList
RollList = class()
function RollList:init(x, y, list, selection)
local a, b
self.x = x
self.y = y
self.w = 0
self.list = {}
pushStyle()
font("AmericanTypewriter")
fontSize(30)
for k,v in pairs(list) do
self.list[#self.list + 1] = v
a,b = textSize(v)
self.w = math.max(self.w, a)
end
popStyle()
self.w = self.w/2
local s = selection
if s == nil then
s = 1
end
self.deltaY = -35*s
self.Selection = self.list[s]
end
function RollList:draw()
pushMatrix()
pushStyle()
fill(127, 127, 127, 255)
font("AmericanTypewriter")
fontSize(25)
for k,v in pairs(self.list) do
local t = (self.deltaY + k*35)/90
local a = 90*math.sin(t)
t = math.deg(t)
if t < 90 and t > 0 then
pushMatrix()
pushStyle()
clip(self.x - self.w, self.y + 17, 2*self.w, 90)
translate(self.x, self.y + a)
rotate(t, 1, 0, 0)
text(v, 0, 0)
clip()
popStyle()
popMatrix()
elseif t > -90 and t < 0 then
pushMatrix()
pushStyle()
clip(self.x - self.w, self.y -107, 2*self.w, 90)
translate(self.x, self.y + a)
rotate(t, 1, 0, 0)
text(v, 0, 0)
clip()
popStyle()
popMatrix()
end
if t > -20 and t < 20 then
pushMatrix()
pushStyle()
fill(0, 0, 0, 255)
fontSize(28)
clip(self.x - self.w, self.y - 17, 2*self.w, 34)
translate(self.x, self.y + a)
rotate(t, 1, 0, 0)
text(v, 0, 0)
clip()
popMatrix()
popStyle()
if math.abs(a) < 10 then
self.Selection = v
self.SelectionK = k
if self.Selection ~= self.PrevSelection then
sound(DATA, "ZgBAIQArQFZBQEBAAAAAAAnUjT0AAAAAGABAf0BHQEBAQEBA")
end
end
end
end
strokeWidth(2)
stroke(127, 127, 127, 255)
translate(0, 0, 6)
line(self.x - self.w, self.y + 17, self.x + self.w, self.y + 17)
line(self.x - self.w, self.y - 17, self.x + self.w, self.y - 17)
popStyle()
popMatrix()
self.PrevSelection = self.Selection
end
function RollList:touched(touch)
if touch.state == BEGAN and math.abs(touch.x - self.x) < self.w and math.abs(touch.y - self.y) < 90 then
if self.Tween then
tween.stop(self.Tween)
end
self.AvgDeltaY = 0
self.Touching = true
self.ty = touch.y
self.pty = touch.y
elseif touch.state == MOVING and self.Touching then
self.AvgDeltaY = self.AvgDeltaY + touch.deltaY/10
self.deltaY = self.deltaY + touch.deltaY
self.ty = self.pty - touch.y
self.pty = touch.y
elseif touch.state == ENDED and self.Touching then
if math.abs(self.ty) > 1 then
local a,b = math.modf((self.deltaY + self.AvgDeltaY*50)/35)*35
local t = 3
if (self.SelectionK < 10 and a > 0) or (self.SelectionK > #self.list - 10 and a < 0) then
t = 1
end
self.Tween = tween(t, self, {deltaY = math.max(math.min(a,-35), -#self.list*35 ) },
tween.easing.quartOut)
else
a = -self.SelectionK*35
self.Tween = tween(1, self, {deltaY = math.max(math.min(a,-35), -#self.list*35 ) },
tween.easing.quartOut)
end
self.Touching = false
end
end
--# Main
--The name of the project must match your Codea project name if dependencies are used.
--Project: User Interface
--Version: 0.0.1
--Comments:
function setup()
f = 60
local t = {}
t = spriteList("Cargo Bot")
list = RollList(WIDTH/2, HEIGHT/2, t, #t/2)
parameter.watch("f")
end
function draw()
f = .9*f + .1/DeltaTime
background(255, 255, 255, 255)
stroke(255, 0, 0, 255)
strokeWidth(100)
fill(255, 0, 0, 255)
--translate(-100, 0)
list:draw()
text(list.Selection, WIDTH/2, HEIGHT/2 - 200)
end
function touched(touch)
list:touched(touch)
end