- You're a cute little sheep dog, running along, trying to add more dogs to your pack while avoiding obstacles
- alternative concept: fish/school of fish
- Horizontal sidescroller
- constant horizontal (rightward) movement
/* | |
* | |
* tsconfig.json | |
* | |
*/ | |
{ | |
"compilerOptions": { | |
"target": "es6", | |
"module": "commonJs", | |
"baseUrl": ".", |
struct AnimatedView: View { | |
@State var percentComplete: CGFloat = 0.0 | |
var body: some View { | |
Ellipse() | |
.trim(from: 0, to: self.percentComplete) | |
.stroke(Color.purple, style: StrokeStyle(lineWidth: 20, lineCap: .round)) | |
.frame(width: UIScreen.main.bounds.width / 2, height: UIScreen.main.bounds.width) | |
.animation(.easeOut(duration: 2.0)) | |
.onAppear { |
import SwiftUI | |
struct PaginatedView<Page: View & Identifiable>: View { | |
@State private var totalOffset: CGFloat = 0 | |
@State private var pageOffset: CGFloat = 0 | |
@State private var currentPageIndex: Int = 0 | |
var pages: [Page] | |
var spacing: CGFloat | |
var body: some View { |
import React, {FunctionComponent, useRef} from 'react'; | |
import { | |
FlatList, | |
View, | |
StyleSheet, | |
Dimensions, | |
Image, | |
Animated, | |
} from 'react-native'; |
import { BlurView } from 'expo-blur'; | |
import React, { FunctionComponent, useEffect, useState } from 'react'; | |
import { View, StyleSheet, Dimensions, Animated, Pressable, Text, Easing } from 'react-native'; | |
import { LinearGradient } from 'expo-linear-gradient'; | |
const { width, height } = Dimensions.get('screen'); | |
const BreathAnimation: FunctionComponent = () => { | |
const animatedScale = React.useRef(new Animated.Value(1)).current; | |
const animatedLeftText = React.useRef(new Animated.Value(10)).current; |
import React, {FunctionComponent, useRef} from 'react'; | |
import { | |
Animated, | |
Dimensions, | |
FlatList, | |
Image, | |
StyleSheet, | |
View, | |
} from 'react-native'; |
import React, {FunctionComponent, useEffect} from 'react'; | |
import {Animated, Dimensions, FlatList, StyleSheet, View} from 'react-native'; | |
const {width} = Dimensions.get('screen'); | |
const AnimatedProgress: FunctionComponent = () => { | |
return ( | |
<FlatList | |
contentContainerStyle={style.contentContainer} | |
data={[1, 2, 3, 4, 5]} |
import { BlurView } from 'expo-blur'; | |
import React, { FunctionComponent, useEffect } from 'react'; | |
import { View, StyleSheet, Dimensions, Animated, Pressable, Easing, Text } from 'react-native'; | |
import { LinearGradient } from 'expo-linear-gradient'; | |
const { width, height } = Dimensions.get('screen'); | |
const BreathAnimation: FunctionComponent = () => { | |
const animatedScale = React.useRef(new Animated.Value(1)).current; | |
const animatedTextScale = React.useRef(new Animated.Value(1)).current; |