CONTENTS: Summary This was my first project where I have dug deeper into react-native-skia. I think this is a wonderful technology. The goal was to demonstrate that you can actually render 60 FPS animation with a composable view that responds to user and device input while having multiple images, layers and transformations at the same …
▶ Full Video ▶ Reel 📟 Pokédex GIF Gallery Click any card to open the file. #001 Pikachu #002 Bulbasaur #003 Jolteon #004 Charizard Big #005 Pikachu #006 Chardizard #007 Pikachu #008 Squirtle #009 Marill #010 Mew #011 Mew Controls 🟡 ???Coming soon CONTENTS: Here we will talk about how we can optimize the sensor’s …
Pokemon Cards with Skia – Sensors and General Optimisations Read More »
GESTURE AND MOTION As you have probably noticed the gesture component is a component that is above the canvas since it needs to detect the gesture and motion changes and then pass them into the canvas to render the card tilt, gloss and holo change and affect the styles that are computed in canvas component …
Pokemon Cards with Skia – Gesture and Motion Optimisations Read More »
in this part we will focus no how we can optimse the shader component and the process of animating the shader. CONTENTS: ▶ Full Video ▶ Reel 📟 Pokédex GIF Gallery Click any card to open the file. #001 Pikachu #002 Bulbasaur #003 Jolteon #004 Charizard Big #005 Pikachu #006 Chardizard #007 Pikachu #008 Squirtle …
As mentioned before in this article we will take a look at how we have optimised the canvas component that is responsible for rendering the shader background and the images. Some of the images render dynamically based on the device movement and gestures (holo layer and shine). Other are created dynamically based on the image …
Recently I was working on a demo app that uses react-native-skia to make cards with a shine and a glare. I found some projects on the internet implementing this functionality. These projects were inspired by pokemon cards: You can find my project here: Demo Gallery ▶ Full Video ▶ Reel 📟 Pokédex GIF Gallery Click …