기간: 2024.1.10 (수) ~ 2024.1.21 (일)
애니메이션은 너무 어렵습니다.. 약간 다른 뇌를 사용하는 기분..
카드 애니메이션 만들기 과제부터(약 10주부터) 아예 과제를 모르는 상태라 강의 들으면서 했는데도 많이 어려웠습니다.
카드 과제는 카드 뒤집는 애니메이션 이 영상을 참고하면서 만들었습니다.
썸네일만 보면 정말 들어가기 조금 그렇지만,,, 좋은 영상이니 함 보세요.
NCT 앨범 소개를 만들자!
NCT라는 그룹 안에 NCT127, NCT dream, NCT U 그리고 Way V라는 그룹으로 나눠져서 활동하는데, 그 많은 활동들 중에서 제가 좋아하는 앨범들을 골라서 앨범 소개를 만들었습니다. (사실 모든 앨범 다 좋아합니다. 진짜임.)
저의 이번 애니메이션 졸업 작품입니다.
아쉬운 점은 아래 버튼을 맨 아래에 고정시키고 싶었는데 못 했습니다. 까비
그리고 다시 보니까 앨범이 너무 큰 것 같아요ㅠ 부담스러울지도?
import 'package:flutter/material.dart';
class FavoriteButton extends StatefulWidget {
const FavoriteButton({
double? iconSize,
Color? iconColor,
Color? iconDisabledColor,
bool? isFavorite,
required Function valueChanged,
Key? key,
}) : _iconSize = iconSize ?? 65.0,
_iconColor = iconColor ?? const Color(0xffFC427B),
_iconDisabledColor = iconDisabledColor ?? Colors.black45,
_isFavorite = isFavorite ?? false,
_valueChanged = valueChanged,
super(key: key);
final double _iconSize;
final Color _iconColor;
final bool _isFavorite;
final Function _valueChanged;
final Color? _iconDisabledColor;
State createState() => _FavoriteButtonState();
}
class _FavoriteButtonState extends State<FavoriteButton>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<Color?> _colorAnimation;
late Animation<double> _sizeAnimation;
late CurvedAnimation _curve;
double _maxIconSize = 0.0;
double _minIconSize = 0.0;
final int _animationTime = 400;
bool _isFavorite = false;
bool _isAnimationCompleted = false;
void initState() {
super.initState();
_isFavorite = widget._isFavorite;
_maxIconSize = (widget._iconSize < 20.0)
? 20.0
: (widget._iconSize > 100.0)
? 100.0
: widget._iconSize;
final double sizeDifference = _maxIconSize * 0.30;
_minIconSize = _maxIconSize - sizeDifference;
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: _animationTime),
);
_curve = CurvedAnimation(curve: Curves.slowMiddle, parent: _controller);
Animation<Color?> selectedColorAnimation = ColorTween(
begin: widget._iconColor,
end: widget._iconDisabledColor,
).animate(_curve);
Animation<Color?> deSelectedColorAnimation = ColorTween(
begin: widget._iconDisabledColor,
end: widget._iconColor,
).animate(_curve);
_colorAnimation = (_isFavorite == true)
? selectedColorAnimation
: deSelectedColorAnimation;
_sizeAnimation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(
begin: _minIconSize,
end: _maxIconSize,
),
weight: 50,
),
TweenSequenceItem<double>(
tween: Tween<double>(
begin: _maxIconSize,
end: _minIconSize,
),
weight: 50,
),
],
).animate(_curve);
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_isAnimationCompleted = true;
_isFavorite = !_isFavorite;
widget._valueChanged(_isFavorite);
} else if (status == AnimationStatus.dismissed) {
_isAnimationCompleted = false;
_isFavorite = !_isFavorite;
widget._valueChanged(_isFavorite);
}
});
}
void dispose() {
super.dispose();
_controller.dispose();
}
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, _) {
return InkResponse(
onTap: () {
setState(() {
if (_isAnimationCompleted == true) {
_controller.reverse();
} else {
_controller.forward();
}
});
},
child: Icon(
(Icons.favorite),
color: _colorAnimation.value,
size: _sizeAnimation.value,
),
);
},
);
}
}
favorite_button.dart 파일을 따로 파서 만들고
FavoriteButton(
//isFavorite: true,
valueChanged: (isFavorite) {
print('Is Favorite : $isFavorite');
},
),
이렇게 호출했습니다.
하트는 귀여우니까 많이 봐주세요.
다른 건 코드 공개하기 부끄러우니까 나중에 깃헙에 업데이트 하면 다시 올리겠습니다.
사실 저 졸업 작품을 제출하기 전에 이것저것 더 만들어 봤습니다.
이건.. 버튼 부분을 고정시키고ㅋㅋㅋㅋㅋㅋ 다른 창들만 움직이게 만들어서..
그래도 이것도 나름 만족스럽습니다. 근데 졸작이 더 잘 만든 것 같아요.
이건 뭔가.. 산만하기만 하고 졸업 조건에 맞지 않아서 기각했습니다.
그리고 앨범 꺼낼 때에는 괜찮은데 뒤로가기가 아쉽습니다. 나중에 수정해야지.
역시,, 덕질의 힘은 많이 무섭습니다.
게으른 저도 내 새끼 예뻐 보이고 싶어서 이것저것 만들게 하다니..
10주간 (사실 20주지..) 공부하면서 느낀 것은,, 생각보다 많이 지친다는 점입니다. 그럼에도 같이 공부해 준 스터디원 분들, 잘 챙겨주신 보라 님과 TA 분들 덕분에 이번에는 포기하지 않고 무사히 졸업할 수 있었습니다.
그것뿐만 아니라, 주변에서도 늘 신경 써주고 제 주간회고록 벨로그에도 댓글 달아주고 챙겨준 지인들 덕분에 즐겁게 마무리 할 수 있어서 정말 영광입니다.
다들 감사합니다!
일단 10주 동안 포기하지 않고 스터디 참여했다는 것에 큰 박수를 드립니다.
이런 의지와 열정이라면 충분히 멋진 개발자가 되시겠네요 ㅎㅎ 꼭 포기하지 않고
완주하시기 바랍니다. 그래도 건강은 잘 챙깁시다 화이팅~!
와 졸업작품의 전에 제작한 것들은 봤었는데, 졸업작품은 오늘 처음 보네요.
너무 이뻐요!!! 정말 잘 만드셨다! 기선님이 뿌듯해 하는 느낌이 여기까지 와욬ㅋㅋ
신나게 놀고나서도 집가서 강의듣고 과제구현 하셨던 내용들 쭉 보니깐 너무 멋진 것 같아요.
10주간 정말 고생하셨어요!
당신의 완주를 축하드리며,, 삼수할 줄 알았는데 재수로 끝내는 모습 너무 멋집니다. 직장과 병행하면서까지 완주한 모습에 감탄하며 자극받고 갑니다 : ) bb
이제 리액트 해야지?
화려한 애니메이션과제 너무좋다 여러가지로 시도해본거 베리굿굿
졸업햇다는 마지막 문장 육성으로 들리는거 같네ㅋㅋㅋㅋㅋㅋ
기선이 10주챌 고생했다!!!!!!!!!!!