New hole approach
This commit is contained in:
DMK
223
lib/main.dart
223
lib/main.dart
@@ -1,189 +1,74 @@
|
|||||||
|
import 'dart:math';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/scheduler.dart';
|
|
||||||
import 'dart:async';
|
|
||||||
|
|
||||||
void main() => runApp(MyApp());
|
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
runApp(MyApp());
|
||||||
|
}
|
||||||
|
|
||||||
class MyApp extends StatelessWidget {
|
class MyApp extends StatelessWidget {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return MaterialApp(home: Scaffold(body: App()));
|
return MaterialApp(
|
||||||
|
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
|
||||||
|
debugShowCheckedModeBanner: false,
|
||||||
|
home: Scaffold(
|
||||||
|
body: Center(
|
||||||
|
child: MyWidget(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class App extends StatefulWidget {
|
class MyWidget extends StatelessWidget {
|
||||||
@override
|
|
||||||
AppState createState() => AppState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class AppState extends State<App> with SingleTickerProviderStateMixin {
|
|
||||||
AnimationController _controller;
|
|
||||||
String param;
|
|
||||||
double tm;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
param = "beginning";
|
|
||||||
_controller = AnimationController(
|
|
||||||
duration: Duration(milliseconds: 10000),
|
|
||||||
vsync: this,
|
|
||||||
)..addListener(() => contrVal());
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_controller?.dispose();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
Future _startAnim() async {
|
|
||||||
try {
|
|
||||||
await _controller.forward().orCancel;
|
|
||||||
// await _controller.reverse().orCancel;
|
|
||||||
} on TickerCanceled {
|
|
||||||
print('welp we fucked');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
contrVal() {
|
|
||||||
setState(() {
|
|
||||||
tm = _controller.value;
|
|
||||||
if (_controller.value >= 0.2) param = 'two seconds';
|
|
||||||
if (_controller.value >= 0.5) param = "five seconds";
|
|
||||||
if (_controller.value >= 1) param = "ten seconds";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Material(
|
return Transform.rotate(
|
||||||
child: GestureDetector(
|
angle: 0,
|
||||||
onTap: () {
|
child: Scaffold(
|
||||||
_startAnim();
|
appBar: AppBar(
|
||||||
},
|
title: Text('Hello, again'),
|
||||||
|
),
|
||||||
|
body: Stack(
|
||||||
|
// fit: StackFit.expand,
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
height: 800,
|
||||||
|
width: 800,
|
||||||
|
child: Image.network(
|
||||||
|
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
)),
|
||||||
|
_getOverlay()
|
||||||
|
])));
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _getOverlay() {
|
||||||
|
return ColorFiltered(
|
||||||
|
colorFilter: ColorFilter.mode(Colors.black54, BlendMode.srcOut),
|
||||||
child: Stack(
|
child: Stack(
|
||||||
fit: StackFit.expand,
|
|
||||||
children: [
|
children: [
|
||||||
Image.network(
|
Container(
|
||||||
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
|
decoration: BoxDecoration(
|
||||||
fit: BoxFit.cover,
|
color: Colors.transparent,
|
||||||
),
|
),
|
||||||
ColorFiltered(
|
child: Align(
|
||||||
colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
|
alignment: Alignment(-0.3, -0.8),
|
||||||
BlendMode.srcOut), // This one will create the magic
|
child: Container(
|
||||||
child: Stack(
|
margin: const EdgeInsets.only(right: 4, bottom: 4),
|
||||||
fit: StackFit.expand,
|
height: 80,
|
||||||
children: [
|
width: 160,
|
||||||
Container(
|
decoration: BoxDecoration(
|
||||||
decoration: BoxDecoration(
|
color: Colors.black, // Color does not matter but should not be transparent
|
||||||
color: Colors.black,
|
borderRadius: BorderRadius.circular(40),
|
||||||
backgroundBlendMode: BlendMode
|
|
||||||
.dstOut), // This one will handle background + difference out
|
|
||||||
),
|
),
|
||||||
MovingHole(controller: _controller),
|
),
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Container(
|
|
||||||
alignment: Alignment.bottomCenter,
|
|
||||||
child: Text(
|
|
||||||
"$param - $tm",
|
|
||||||
style:
|
|
||||||
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
|
|
||||||
))
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
));
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class MovingHole extends StatelessWidget {
|
|
||||||
double timeM(double scene) {
|
|
||||||
int time = 10;
|
|
||||||
return scene / time;
|
|
||||||
}
|
|
||||||
|
|
||||||
MovingHole({Key key, this.controller})
|
|
||||||
: scale1 = Tween<double>(begin: 1.0, end: 0.5).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: controller,
|
|
||||||
curve: Interval(0.05, 0.075, curve: Curves.easeOut),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
scale2 = Tween<double>(begin: 0.5, end: 1.2).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: controller,
|
|
||||||
curve: const Interval(
|
|
||||||
0.5,
|
|
||||||
0.55,
|
|
||||||
curve: Curves.ease,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
move1 = Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100))
|
|
||||||
.animate(CurvedAnimation(
|
|
||||||
parent: controller,
|
|
||||||
curve: const Interval(
|
|
||||||
0.0,
|
|
||||||
0.1,
|
|
||||||
curve: Curves.ease,
|
|
||||||
),
|
|
||||||
)),
|
|
||||||
move2 = Tween<Offset>(begin: Offset(50, 100), end: Offset(30, 20))
|
|
||||||
.animate(CurvedAnimation(
|
|
||||||
parent: controller,
|
|
||||||
curve: const Interval(
|
|
||||||
0.9,
|
|
||||||
1.0,
|
|
||||||
curve: Curves.ease,
|
|
||||||
),
|
|
||||||
)),
|
|
||||||
super(key: key);
|
|
||||||
|
|
||||||
final AnimationController controller;
|
|
||||||
final Animation<double> scale1;
|
|
||||||
final Animation<double> scale2;
|
|
||||||
final Animation<Offset> move1;
|
|
||||||
final Animation<Offset> move2;
|
|
||||||
final Color color = Colors.black;
|
|
||||||
// final Size size;
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return AnimatedBuilder(
|
|
||||||
animation: controller,
|
|
||||||
builder: (BuildContext context, Widget child) {
|
|
||||||
return Container(
|
|
||||||
child: Transform(
|
|
||||||
alignment: Alignment.center,
|
|
||||||
transform: Matrix4.identity()
|
|
||||||
..scale(scale1.value)
|
|
||||||
..scale(scale2.value)
|
|
||||||
..translate(
|
|
||||||
move1.value.dx,
|
|
||||||
move1.value.dy,
|
|
||||||
)
|
|
||||||
..translate(
|
|
||||||
move2.value.dx,
|
|
||||||
move2.value.dy,
|
|
||||||
),
|
|
||||||
// child: Opacity(
|
|
||||||
// opacity: opacityAnimation.value,
|
|
||||||
child: Container(
|
|
||||||
width: 60.0,
|
|
||||||
height: 60.0,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
color: color,
|
|
||||||
border: Border.all(
|
|
||||||
color: color,
|
|
||||||
style: BorderStyle.solid,
|
|
||||||
width: 4.0 - (2 * controller.value))),
|
|
||||||
)),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// создать переменную, листенером слить текущее значение, на поляне в стеке вывести.
|
|
||||||
// сколько составляет 0.05 от 10 секунд
|
|
||||||
|
|||||||
198
lib/~~main~~.dart
Normal file
198
lib/~~main~~.dart
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/scheduler.dart';
|
||||||
|
import 'dart:async';
|
||||||
|
|
||||||
|
void main() => runApp(MyApp());
|
||||||
|
|
||||||
|
class MyApp extends StatelessWidget {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return MaterialApp(home: Scaffold(body: App()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends StatefulWidget {
|
||||||
|
@override
|
||||||
|
AppState createState() => AppState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class AppState extends State<App> with SingleTickerProviderStateMixin {
|
||||||
|
AnimationController _controller;
|
||||||
|
String param;
|
||||||
|
int playTime = 10;
|
||||||
|
double tm;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
param = "beginning";
|
||||||
|
_controller = AnimationController(
|
||||||
|
duration: Duration(seconds: playTime),
|
||||||
|
vsync: this,
|
||||||
|
)..addListener(() => contrVal());
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller?.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
Future _startAnim() async {
|
||||||
|
try {
|
||||||
|
_controller.reset();
|
||||||
|
await _controller.forward().orCancel;
|
||||||
|
// await _controller.reverse().orCancel;
|
||||||
|
} on TickerCanceled {
|
||||||
|
print('welp we fucked');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
contrVal() {
|
||||||
|
setState(() {
|
||||||
|
tm = _controller.value;
|
||||||
|
if (_controller.value >= 0.2) param = 'two seconds';
|
||||||
|
if (_controller.value >= 0.5) param = "five seconds";
|
||||||
|
if (_controller.value >= 1) param = "ten seconds";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Material(
|
||||||
|
child: GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
_startAnim();
|
||||||
|
},
|
||||||
|
child: Stack(
|
||||||
|
fit: StackFit.expand,
|
||||||
|
children: [
|
||||||
|
Image.network(
|
||||||
|
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
),
|
||||||
|
ColorFiltered(
|
||||||
|
colorFilter:
|
||||||
|
ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
|
||||||
|
child: Stack(
|
||||||
|
fit: StackFit.expand,
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.black,
|
||||||
|
backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
|
||||||
|
),
|
||||||
|
// Container(width: 100, height: 100, decoration: BoxDecoration(color: Colors.black)),
|
||||||
|
MovingHole(
|
||||||
|
controller: _controller,
|
||||||
|
time: playTime,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
alignment: Alignment.bottomCenter,
|
||||||
|
child: Text(
|
||||||
|
"$param",
|
||||||
|
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
|
||||||
|
))
|
||||||
|
],
|
||||||
|
),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class MovingHole extends StatefulWidget {
|
||||||
|
MovingHole({Key key, this.controller, this.time}) : super(key: key);
|
||||||
|
|
||||||
|
final int time;
|
||||||
|
final AnimationController controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
_MovingHoleState createState() => _MovingHoleState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _MovingHoleState extends State<MovingHole> {
|
||||||
|
_MovingHoleState();
|
||||||
|
AnimationController controller;
|
||||||
|
List<Animation<double>> scale = [];
|
||||||
|
List<Animation<Offset>> move = [];
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
controller = widget.controller;
|
||||||
|
scale
|
||||||
|
..add(Tween<double>(begin: 1.0, end: 0.5).animate(
|
||||||
|
CurvedAnimation(
|
||||||
|
parent: controller,
|
||||||
|
curve: Interval(tu(0.5), tu(1.25), curve: Curves.easeOut),
|
||||||
|
),
|
||||||
|
))
|
||||||
|
..add(Tween<double>(begin: 0.5, end: 1.2).animate(
|
||||||
|
CurvedAnimation(
|
||||||
|
parent: controller,
|
||||||
|
curve: Interval(
|
||||||
|
tu(3.5),
|
||||||
|
tu(4.0),
|
||||||
|
curve: Curves.ease,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
));
|
||||||
|
move
|
||||||
|
..add(Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100)).animate(CurvedAnimation(
|
||||||
|
parent: controller,
|
||||||
|
curve: Interval(
|
||||||
|
tu(0.0),
|
||||||
|
tu(0.5),
|
||||||
|
curve: Curves.ease,
|
||||||
|
),
|
||||||
|
)))
|
||||||
|
..add(Tween<Offset>(begin: Offset(50, 100), end: Offset(30, 20)).animate(CurvedAnimation(
|
||||||
|
parent: controller,
|
||||||
|
curve: Interval(
|
||||||
|
0.9,
|
||||||
|
1.0,
|
||||||
|
curve: Curves.ease,
|
||||||
|
),
|
||||||
|
)));
|
||||||
|
}
|
||||||
|
|
||||||
|
double tu(double value) {
|
||||||
|
return value / widget.time;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
Matrix4 allMoves = Matrix4.identity();
|
||||||
|
scale.forEach((item) {
|
||||||
|
allMoves.scale(item.value);
|
||||||
|
});
|
||||||
|
move.forEach((item) {
|
||||||
|
allMoves.translate(item.value.dx, item.value.dy);
|
||||||
|
});
|
||||||
|
return
|
||||||
|
// AnimatedBuilder(
|
||||||
|
// animation: controller,
|
||||||
|
// builder: (BuildContext context, Widget child) {
|
||||||
|
// return
|
||||||
|
// // Container(
|
||||||
|
// child:
|
||||||
|
Transform(
|
||||||
|
alignment: Alignment.topLeft,
|
||||||
|
transform: allMoves,
|
||||||
|
child: Container(
|
||||||
|
// width: 60.0,
|
||||||
|
// height: 10.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.rectangle,
|
||||||
|
color: Colors.black,
|
||||||
|
// border: Border.all(color: color, style: BorderStyle.solid, width: 4.0 - (2 * controller.value))
|
||||||
|
// ),
|
||||||
|
)),
|
||||||
|
);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// создать переменную, листенером слить текущее значение, на поляне в стеке вывести.
|
||||||
|
// сколько составляет 0.05 от 10 секунд
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
|
||||||
import 'package:moving_hole/main.dart';
|
import 'package:moving_hole/~~main~~.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
|
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
|
||||||
|
|||||||
Reference in New Issue
Block a user