transitions

apps/Overview.lua

@@ -6,6 +6,7 @@ local Config = require('config')
 local NFT = require('nft')
 local class = require('class')
 local FileUI = require('fileui')
+local Tween = require('tween')
 
 multishell.setTitle(multishell.getCurrent(), 'Overview')
 UI:configure('Overview', ...)
@@ -190,8 +191,9 @@ function page.container:setCategory(categoryName)
 
   -- reposition all children
   for k,child in ipairs(self.children) do
-    child.x = col
+    child.x = -10
-    child.y = row
+    child.y = math.floor(self.height)
+    child.tween = Tween.new(6, child, { x = col, y = row }, 'outSine')
 
     if k < count then
       col = col + child.width
@@ -203,6 +205,25 @@ function page.container:setCategory(categoryName)
   end
 
   self:initChildren()
+  self.animate = true
+end
+
+function page.container:draw()
+  if self.animate then
+    self.animate = false
+    for i = 1, 6 do
+      for _,child in ipairs(self.children) do
+        child.tween:update(1)
+        child.x = math.floor(child.x)
+        child.y = math.floor(child.y)
+      end
+      UI.ViewportWindow.draw(self)
+      self:sync()
+      os.sleep()
+    end
+  else
+    UI.ViewportWindow.draw(self)
+  end
 end
 
 function page:refresh()
@@ -223,6 +244,8 @@ function page:eventHandler(event)
     self.tabBar:selectTab(event.button.text)
     self.container:setCategory(event.button.text)
     self.container:draw()
+    self:sync()
+
     config.currentCategory = event.button.text
     Config.update('Overview', config)
 
@@ -263,9 +286,9 @@ function page:eventHandler(event)
 
   elseif event.type == 'tab_change' then
     if event.current > event.last then
-      self.container:setTransition('left')
+      --self.container:setTransition(UI.effect.slideLeft)
     else
-      self.container:setTransition('right')
+      --self.container:setTransition(UI.effect.slideRight)
     end
 
   elseif event.type == 'refresh' then
@@ -391,7 +414,9 @@ function editor:eventHandler(event)
     self.statusBar:draw()
 
   elseif event.type == 'loadIcon' then
-    UI:setPage(FileUI(), fs.getDir(self.iconFile), function(fileName)
+    local fileui = FileUI()
+    --fileui:setTransition(UI.effect.explode)
+    UI:setPage(fileui, fs.getDir(self.iconFile), function(fileName)
       if fileName then
         self.iconFile = fileName
         local s, m = pcall(function()

sys/apis/ui.lua

@@ -102,6 +102,11 @@ Manager.effect = {
     ticks = 12,
     easing = 'outBounce',
   },
+  explode = {
+    type = 'explode',
+    ticks = 12,
+    easing = 'outBounce',
+  },
 }
 
 function Manager:init(args)
@@ -109,8 +114,6 @@ function Manager:init(args)
   local shift = false
   local pages = { }
 
-  self.effectsEnabled = true
-
   Event.addHandler('term_resize', function(h, side)
     if self.currentPage then
       -- the parent doesn't have any children set...
@@ -256,7 +259,7 @@ function Manager:configure(appName, ...)
 end
 
 function Manager:disableEffects()
-  self.effectsEnabled = false
+  self.defaultDevice.effectsEnabled = false
 end
 
 function Manager:loadTheme(filename)
@@ -819,11 +822,13 @@ function UI.Window:scrollIntoView()
   end
 end
 
-function UI.Window:setTransition(effect, y, height)
+function UI.Window:setTransition(effect, x, y, width, height)
   if self.parent then
+    x = x or 1
     y = y or 1
+    width = width or self.width
     height = height or self.height
-    self.parent:setTransition(effect, y + self.y - 1, height)
+    self.parent:setTransition(effect, x + self.x, y + self.y - 1, width, height)
   end
 end
 
@@ -852,6 +857,7 @@ UI.Device.defaults = {
   backgroundColor = colors.black,
   textColor = colors.white,
   textScale = 1,
+  effectsEnabled = true,
   lines = { },
 }
 
@@ -908,9 +914,13 @@ function UI.Device:reset()
   self.device.setCursorPos(1, 1)
 end
 
-function UI.Device:setTransition(effect, y, height)
+function UI.Device:setTransition(effect, x, y, width, height)
   if not self.transition then
     self.transition = effect
+    effect.x = x
+    effect.y = y
+    effect.width = width
+    effect.height = height
     for i = y, y + height - 1 do
       local line = self.lines[i]
       if line then
@@ -965,26 +975,36 @@ function UI.Device:runTransition(effect)
     until pos.x == self.width
 
   elseif effect.type == 'explode' then
-    local half = math.floor(self.width / 2)
+    local pos = { x = 1 }
-    local c = os.clock()
+    local tween = self.Tween.new(effect.ticks, pos, { x = 100 }, effect.easing)
-    local steps = math.floor(self.width * .5)
+    local mx = math.floor(effect.width / 2)
-    for i = 1, half do
+    local my = math.floor(effect.height / 2)
-      for y, line in pairs(self.lines) do
+
-        local width = i * 2
+      local function replace(sstr, pos, rstr, width)
-        local mid = half - i + 1
+        return sstr:sub(1, pos-1) .. rstr .. sstr:sub(pos+width)
-        self.device.setCursorPos(mid, y)
-        self.device.blit(
-          line.text:sub(mid, mid + width),
-          line.fg:sub(mid, mid + width),
-          line.bg:sub(mid, mid + width))
       end
-      if (i + math.floor(steps / 2)) % steps == 0 then
+
-        if c == os.clock() then
+debug('running')
-          os.sleep(0)
+    repeat
-          c = os.clock()
+      tween:update(1)
+      local ux = math.floor(effect.width * pos.x / 200)
+      local uy = math.floor(effect.height * pos.x / 200)
+      local width = ux * 2
+      local sx = mx - ux + 1
+debug({ pos.x, ux, uy })
+      for y = my - uy, my + uy do
+        local line = self.lines[y]
+        if line then
+          self.device.setCursorPos(1, y)
+          self.device.blit(
+            replace(self.lastScreen[y].text, sx, line.text:sub(sx, sx + width - 1), width),
+            replace(self.lastScreen[y].fg, sx, line.fg:sub(sx, sx + width - 1), width),
+            replace(self.lastScreen[y].bg, sx, line.bg:sub(sx, sx + width - 1), width))
         end
       end
-    end
+      os.sleep(.4)
+    until pos.x == 100
+debug('done running')
   end
 
   for y, line in ipairs(self.lines) do
@@ -996,7 +1016,7 @@ end
 function UI.Device:sync()
 
   local transition
-  if self.transition and UI.effectsEnabled then
+  if self.transition and self.effectsEnabled then
     for y, line in pairs(self.lines) do
       if line.dirty then
         transition = self.transition